better-auth/better-icons

Overview

This skill provides a fast CLI and MCP server for searching and retrieving SVG icons from 200+ Iconify libraries. It helps developers and AI agents find icons by keyword or collection, fetch SVG output, and integrate icons into projects. Use it to standardize icon selection and automate icon workflows.

How this skill works

The CLI exposes commands to search icons and retrieve SVGs: better-icons search <query> lists matching icons and better-icons get <id> outputs SVG to stdout with optional color and size. The MCP server exposes tools for agents to search, batch-download, recommend, and sync icons into project files using Iconify as the backend.

When to use it

• When you need a consistent icon across a project or design system.
• When searching for icons by keyword, collection prefix, or category.
• When automating icon retrieval or inserting icons into component files.
• When an AI agent needs to recommend or fetch icons programmatically.
• When batch downloading or syncing icons into React/Vue/Svelte projects.

Best practices

• Use collection prefixes (prefix:name) to avoid ambiguous results, e.g., lucide:home.
• Limit search results when integrating into UI; use --limit to control payload size.
• Fetch SVGs via better-icons get and pipe to files for build pipelines or asset storage.
• When syncing, provide a clear component_name and target framework to generate usable components.
• Prefer currentColor for color when building themeable icon components.

Example use cases

• Developer searches for navigation icons and exports chosen SVGs for the asset folder.
• CI pipeline runs batch get\_icons to produce optimized SVG sprites before deployment.
• AI assistant recommends icon options for a toolbar and returns SVGs for preview.
• Project migration script uses sync\_icon to convert external icon IDs into framework components.
• Design system curator lists popular collections and creates a curated icon subset for the team.