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)