Icon Design
Pick icons that match your content's meaning, not just appearance. Icon Design maps concepts to three modern libraries, provides ready-to-use React and HTML templates, and enforces consistency rules to avoid common pitfalls like broken tree-shaking and mixed styles.
Icon Design helps you select semantically appropriate icons from Lucide, Heroicons, or Phosphor for your web interfaces.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-03-02
Icon Design helps you select semantically appropriate icons from Lucide, Heroicons, or Phosphor for your web interfaces. Pick icons that match your content's meaning, not just appearance. Icon Design maps concepts to three modern libraries, provides ready-to-use React and HTML templates, and enforces consistency rules to avoid common pitfalls like broken tree-shaking and mixed styles.
Use it when
- Icon Design offers ready-to-use React and HTML templates that streamline the icon creation process.
- Icon Design enforces consistency rules that prevent common pitfalls such as broken tree-shaking and mixed styles.
Install
oakoss/agent-skills/icon-design · repository language: Python
generated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is Icon Design and how does it help create custom icons?
Icon Design is a skill that maps concepts to three modern libraries and provides ready-to-use React and HTML templates for building custom icons. It helps you pick icons that match your content's meaning, not just appearance, while enforcing consistency rules to avoid common pitfalls like broken tree-shaking and mixed styles.
How to design icons using Icon Design's tools and templates?
Icon Design offers ready-to-use React and HTML templates that streamline the icon creation process. The skill maps concepts to modern icon libraries, helping you select appropriate icons and maintain visual consistency across your project while avoiding common design mistakes.
What icon design best practices does Icon Design enforce?
Icon Design enforces consistency rules that prevent common pitfalls such as broken tree-shaking and mixed styles. The skill emphasizes picking icons that match your content's meaning rather than just appearance, ensuring professional and cohesive icon implementations across applications and interfaces.
Can Icon Design help build professional icon sets and design systems?
Yes, Icon Design supports building professional icon sets and design systems by providing access to three modern libraries and enforcing consistency rules. The skill's templates and concept-mapping approach help maintain visual coherence across entire design systems.
What are the key features of Icon Design for UI and app development?
Icon Design provides three modern icon libraries, ready-to-use React and HTML templates, and consistency enforcement rules. It helps developers and designers create semantically appropriate icons for applications and interfaces while avoiding technical issues and maintaining design system integrity.
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Create or design custom icons for applications and interfaces”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Better Icons lets you search and fetch SVG icons from over 200 icon libraries through Iconify. Use the CLI to find icons by query, retrieve them by ID, or batch download results—with options to customize color and size. Also works as an MCP server for AI agents.
Create polished medical infographics from structured data using six pre-built templates: hero stats with gradient badges, multi-section card layouts, side-by-side treatment comparisons, myth-busting debunks, numbered process flows, and patient checklists. Output defaults to 1080×1350 for Instagram, with support for batch generation and parallel processing.
Figma Developer bridges design and code by pulling design tokens, icons, and component data directly from Figma's REST API. It handles token extraction to CSS variables, SVG icon exports, React component generation, and CI-based automation for continuous design sync.
Asset Manager handles the full lifecycle of design assets: organizing files by naming convention, compressing images into modern formats like WebP and AVIF, converting fonts to WOFF2, and maintaining version control through hash-based tracking. It supports responsive image generation at multiple breakpoints and manages brand asset libraries with typed manifests.
Master Tailwind CSS v4's CSS-first approach to rapid UI development with utility classes, design tokens, and modern CSS features. Learn theme configuration, dark mode implementation, container queries, component patterns, and shadcn/ui integration. Covers v3 migration and troubleshooting for build errors.
Visual Designer guides you through establishing design systems grounded in color theory, type scales, and spacing principles. It covers palette creation using the 60-30-10 rule, WCAG contrast requirements, font pairing strategies, and responsive layout techniques to ensure every visual decision serves your users.