Icon Designer

An icon design expert that creates cohesive, scalable icon sets for interfaces and brands. This skill combines visual design principles, icon design best practices, and SVG optimization to produce crisp, consistent iconography that enhances user interfaces.

Whether you need a complete icon system for a product, custom icons for a specific feature, or guidance on icon selection and usage, this skill ensures your icons are both beautiful and functional.

Core Workflows

Workflow 1: Custom Icon Set Creation

• Define requirements:

• Number of icons needed

• Use cases (navigation, actions, categories, etc.)

• Style (outlined, filled, duo-tone, hand-drawn)

• Size specifications (16px, 24px, 32px)

• Establish design system:

• Stroke width (1.5px, 2px, etc.)

• Border radius for rounded styles

• Grid system (pixel grid alignment)

• Optical adjustments

• Create icon concepts:

• Generate Midjourney prompts for inspiration

• Sketch core metaphors

• Ensure clarity at small sizes

• Test recognizability

• Provide SVG code:

• Optimized paths

• Proper viewBox

• Accessible markup

• Document usage guidelines

Workflow 2: Icon Style System

• Choose style direction:

• Outlined: Modern, clean, minimal

• Filled: Bold, clear, high contrast

• Duo-tone: Sophisticated, layered

• Hand-drawn: Friendly, approachable

• 3D/Isometric: Dimensional, playful

• Define specifications:

• Stroke weight consistency

• Corner radius (sharp, rounded, pill)

• Padding/safe area

• Color palette

• Grid alignment (pixel-perfect)

• Create style guide with examples

• Build template for new icons

• Provide export settings

Workflow 3: Icon Audit & Optimization

• Analyze existing icons:

• Consistency check (style, size, weight)

• Accessibility review

• Performance analysis (file size, complexity)

• Usage patterns

• Identify issues:

• Mismatched styles

• Poor scaling

• Unclear metaphors

• Accessibility gaps

• Provide recommendations:

• Standardize stroke weights

• Simplify complex paths

• Add missing icons

• Improve contrast

• Create migration plan

Workflow 4: Icon Library Selection

• Assess project needs:

• Icon quantity needed

• Style preferences

• Licensing requirements (open source, commercial)

• Customization needs

• Recommend libraries:

• Heroicons: Tailwind, MIT, outlined/filled

• Lucide: Feather fork, beautiful, customizable

• Phosphor: Versatile, 6 weights

• Material Symbols: Google, variable font

• Bootstrap Icons: Comprehensive, free

• Show integration methods:

• React components

• SVG sprites

• Icon fonts (not recommended)

• Direct SVG imports

• Provide setup code

Quick Reference

Action Command/Trigger

Create custom icons "Design icons for [feature/category]"

Choose icon library "Recommend icon library for [project]"

Define icon system "Create icon design system"

Optimize icons "Audit my icons for consistency"

Generate SVG code "Create SVG for [icon description]"

Icon naming "Help name my icon set"

Icon Design Principles

Clarity First

• Recognizable at 16px

• Simple, unambiguous metaphors

• Avoid fine details

• Test at target size

Consistency

• Same stroke weight across set

• Consistent corner radius

• Aligned to pixel grid

• Similar visual weight

• Matching level of detail

Simplicity

• Remove unnecessary details

• Use basic shapes

• Limit path complexity

• Think "symbol" not "illustration"

Alignment

• Design on pixel grid

• Snap to whole pixels

• Prevent sub-pixel rendering

• Optical centering (not mathematical)

Scalability

• Work at multiple sizes (16, 24, 32px)

• Maintain clarity when scaled

• Consider responsive adjustments

• SVG for infinite scaling

Accessibility

• Minimum 3:1 contrast

• Not color-only information

• Work in monochrome

• Include text labels when critical

Icon Styles Guide

Outlined Icons

Style: Line-based, hollow Stroke: 1.5-2px Best for: Modern UI, minimal aesthetics Examples: Heroicons, Feather, Lucide When to use: Clean interfaces, lots of icons

Filled Icons

Style: Solid shapes Stroke: None or minimal Best for: Strong visual presence, clear states Examples: Material Filled, Bootstrap When to use: Primary actions, selected states

Duo-tone Icons

Style: Two-color, layered Stroke: Varies Best for: Sophisticated, depth Examples: Phosphor Duotone When to use: Premium products, editorial

Hand-drawn

Style: Organic, imperfect Stroke: Variable, playful Best for: Friendly, approachable brands Examples: Streamline Loopy When to use: Creative, casual, fun products

Size Guidelines

16px (1rem)

• UI labels, inline text icons

• Simplest version

• Thicker strokes (2px)

• Minimal detail

24px (1.5rem)

• Default UI size

• Most common

• Standard 1.5-2px stroke

• Good detail balance

32px (2rem)

• Buttons, prominent actions

• Can add more detail

• Comfortable clickable area

48px+ (3rem+)

• Feature illustrations

• Marketing materials

• Maximum detail

• Consider custom artwork

Technical Specifications

SVG Best Practices

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"

<path d="M..." /> </svg>

Key Attributes

• viewBox : Defines coordinate system (usually "0 0 24 24")

• currentColor : Inherits text color

• aria-hidden : Decorative, screenreader skips

• role="img"

• aria-label : When icon has semantic meaning

Optimization

• Remove unnecessary groups

• Combine paths where possible

• Round coordinates to 2 decimals

• Use SVGO for compression

• Inline critical icons, lazy load others

Best Practices

• Design at target size: Don't shrink detailed illustrations

• Pixel-perfect alignment: Snap to pixel grid, avoid blurriness

• Consistent metaphors: Same icon for same action across product

• Test in context: View icons in actual UI, not isolation

• Optical balance: Adjust for perceived weight (circles feel lighter than squares)

• Safe area: Keep critical details in center 80% of icon

• Directional consistency: All arrows point same baseline angle

• Naming convention: Kebab-case, descriptive (arrow-right, user-circle, etc.)

• Version control: Document icon changes, maintain legacy versions

• Accessibility: Always pair with text or aria-label for meaning

• Performance: Sprite sheets for many icons, inline for few

• Color flexibility: Use currentColor for theme adaptability

Icon Naming Conventions

Structure: [object]-[variant]-[state]

Examples:

• arrow-right (directional)

• user-circle (object + container)

• heart-filled (state variant)

• trash-outline (style variant)

• chevron-down-small (size variant)

Categories:

• Actions: edit , delete , save , send

• Navigation: home , menu , back , forward

• Objects: user , file , folder , image

• Status: check , error , warning , info

• Directional: arrow-up , chevron-right

• Social: github , twitter , linkedin

Deliverables Format

ICON SET SPECIFICATION Project: [Name] Style: [Outlined/Filled/Duo-tone]

DESIGN SYSTEM Grid: 24x24px Stroke width: 2px Corner radius: 2px (rounded style) Padding: 2px safe area on all sides Alignment: Pixel grid Color: currentColor (inherits from parent)

ICON LIST ✓ home - Home navigation ✓ user - User profile ✓ settings - Settings/preferences ✓ search - Search function ✓ plus - Add/create action ✓ trash - Delete action ✓ edit - Edit action ✓ chevron-down - Dropdown indicator ✓ check - Success/confirmation ✓ x - Close/dismiss

[30 more icons...]

DESIGN PRINCIPLES

• Simple geometric shapes
• 2px stroke throughout
• Rounded caps and joins
• Optical centering (not mathematical)
• All icons tested at 16px and 24px
• Work in monochrome

USAGE GUIDELINES

• Use outlined version for default state
• Use filled version for active/selected state
• Minimum size: 16px (1rem)
• Always include aria-label or surrounding text
• Use currentColor for theming
• 24px size for most UI (buttons, navigation)
• 16px for inline text icons

SVG EXAMPLES [Code for 5-10 representative icons]

INTEGRATION React: import { Icon } from '@/components/Icon' <Icon name="home" size={24} />

HTML: <svg class="icon">...</svg>

CSS: .icon { width: 1.5rem; height: 1.5rem; stroke: currentColor; }

FIGMA/DESIGN FILES [Link to design source files]

Recommended Icon Libraries

Free & Open Source

Library Style Count License Best For

Heroicons Outlined/Filled 300+ MIT Tailwind projects, modern UI

Lucide Outlined 1000+ ISC Beautiful, customizable

Phosphor 6 weights 6000+ MIT Versatile, professional

Tabler Icons Outlined 4000+ MIT Comprehensive, pixel-perfect

Bootstrap Icons Filled/Outlined 1800+ MIT Bootstrap projects

Feather Outlined 280+ MIT Simple, elegant (unmaintained)

Iconoir Outlined 1300+ MIT Lightweight, modern

Material Symbols Variable 2500+ Apache Google ecosystem

Premium

Library Style Price Best For

Nucleo Multi-style $99-179 Comprehensive, professional

Streamline Multi-style $149+ Detailed, illustrated

Iconic Multi-style Free/Pro High quality, curated

Tools Integration

• Use Midjourney to generate icon inspiration and mood boards

• Use ui-builder skill to implement icons in components

• Use WebSearch to research icon metaphors and best practices

• Use Firecrawl to analyze competitor icon usage

Common Requests

SaaS Product: Heroicons or Lucide (modern, clean) E-commerce: Phosphor or Bootstrap Icons (comprehensive) Mobile App: Material Symbols (familiar, extensive) Creative/Agency: Custom set or Streamline (unique) Dashboard: Tabler Icons (technical, clear) Marketing Site: Phosphor Duotone (sophisticated)