Icon Mode

Icon Mode lets you transform any icon from the Iconify library into a polished app icon. With access to over 200,000 icons from popular icon sets, you can find the perfect base for your design.

Icon Library

Supported Icon Sets

Iconfast integrates with Iconify, providing access to all major icon sets including:

• Material Design Icons - Google's material design system
• Font Awesome - The iconic font and CSS toolkit
• Tabler Icons - Free and open source icons
• Heroicons - Beautiful hand-crafted SVG icons
• Lucide - Beautiful & consistent icons
• Phosphor Icons - Flexible icon family
• And 100+ more professional icon sets

Browsing Icons

1. Collections: Browse icons by collection using the sidebar
2. Search: Use the search bar to find icons by name or keyword
3. Categories: Filter by icon categories within each set

Icon Customization

Size & Position

Icon Color

• Solid Color: Pick any color using the color picker
• HSVA Support: Fine-tune hue, saturation, value, and alpha
• Hex Input: Enter exact color codes

Drop Shadow

Add depth to your icon with customizable shadows:

• Offset X/Y: Shadow position
• Blur: Shadow softness (0 - 50 px)
• Color: Shadow color with opacity

Background Options

Solid Background

Select any color for a clean, simple background.

Gradient Background

Create dynamic backgrounds with gradient options:

Gradient Controls:

• Color Stops: Add multiple colors to your gradient
• Angle: Rotate linear gradients (0 - 360°)
• Position: Adjust gradient focal point

Border Settings

Border Radius

Control corner roundness from sharp (0%) to fully circular (50%).

Border Stroke

• Width: Border thickness (0 - 20 px)
• Color: Solid or gradient border colors

Shadow Effects

Inner Shadow

Create depth with inner shadows:

• Multiple Layers: Stack multiple inner shadows
• Spread: Shadow expansion
• Offset X/Y: Shadow position
• Blur: Shadow softness
• Color: Shadow color with opacity

Combining Shadows

Layer drop shadows and inner shadows together for complex, professional effects.

Best Practices

1. Choose Simple Icons: Icons with clear, recognizable shapes work best at small sizes
2. Ensure Contrast: Make sure your icon color contrasts well with the background
3. Mind the Padding: Leave adequate space between the icon and border
4. Test Visibility: Preview at small sizes to ensure your icon remains recognizable
5. Stay Consistent: If creating multiple icons, maintain consistent styling

Examples

Minimal Style

• White icon on gradient background
• Subtle drop shadow
• Rounded corners

Bold Style

• Large icon with high contrast
• Solid vibrant background
• No shadows, sharp corners

Depth Style

• Icon with drop shadow
• Gradient background
• Inner shadow on border
• Rounded corners