skills.rest
jscraik
jscraikCOMMUNITY
Explore all skills by this author →
Website𝕏@jscraikGitHub

better-icons

Search Iconify collections and sync SVG icons into project files.

8|4|Updated Jan 15, 2026
Search Tags:#ui#design system#icons#svg#ux#iconify
One-click install
npx skills add https://github.com/jscraik/Agent-Skills --skill better-icons-jscraik
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: better-icons
Source: https://github.com/jscraik/Agent-Skills/tree/main/frontend/graphics/better-icons
Command: npx skills add https://github.com/jscraik/Agent-Skills --skill better-icons-jscraik

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the process of finding, selecting, and integrating SVG icons from Iconify collections, ensuring visual consistency and accessibility in your projects.

Core Features & Use Cases

  • Icon Search: Discover suitable icons across various Iconify collections based on keywords or specific IDs.
  • SVG Retrieval: Obtain raw SVG markup for selected icons.
  • Icon Syncing: Automatically update icon files within your project codebase.
  • Use Case: When designing a new feature, use this skill to find a consistent set of icons for buttons and navigation elements, ensuring they match your project's existing style guide.

Quick Start

Use the better-icons skill to search for a 'settings' icon in the 'lucide' collection and return the SVG markup.

Frequently Asked Questions about better-icons

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I find and retrieve SVG icons for my UI design system?▼

To find SVG icons for a UI design system, you can search Iconify libraries by query or specific ID to retrieve raw SVG markup. This process ensures visual consistency by filtering results according to your project's icon family, stroke weight, and theme tokens.

Can I sync Iconify SVG icons directly into my React or Vue codebase?▼

Yes, you can sync Iconify SVG icons directly into a React, Vue, or Svelte codebase. The tool automatically updates and integrates icon files within your project directories, ensuring your components use the correct, standardized SVG markup.

What is the best way to maintain icon consistency across different UX components?▼

Maintaining icon consistency across UX components involves filtering searches by collection prefix and enforcing rules for stroke weight, icon family, and theme tokens. This approach guarantees that selected SVG icons match your existing style guide and accessibility rules perfectly.

Does this icon search tool support filtering by specific Iconify collection prefixes?▼

Yes, the icon search tool supports filtering by specific Iconify collection prefixes. This capability allows you to restrict searches to designated libraries, ensuring retrieved SVGs adhere to a unified visual style and specific accessibility requirements.

How do I get raw SVG markup using a CLI or MCP for frontend development?▼

You can get raw SVG markup for frontend development by querying Iconify libraries through CLI or MCP commands. This method retrieves exact icon code for direct integration into UI elements like buttons and navigation components.

Related Skills

Explore More Design & Creative Skills→
jubscodesjubscodes
49

gsp-icons

Generate an iconography.md chunk with npm import paths, stroke widths, size tokens, and container CSS/Tailwind rules.

Community
Intermediate
qazuorqazuor

design-to-components

Translate design-cloner HTML/CSS output into framework-ready UI components.

Community
Advanced
nholder88nholder88
2

ui-ux-review

Evaluate frontend UI against design-system rules for consistency and accessibility.

Community
Advanced
endlessblinkendlessblink

svg-icon-craft

Generate cyberpunk SVG icons for Vue components with standardized templates.

Community
Intermediate