Overview

This guide will walk you through creating your first app icon with Iconfast. No account or installation required - just open the app and start creating.

Quick Start

Step 1: Choose Your Mode

Iconfast offers two ways to create icons:

Icon Mode (default): Browse and customize from 200,000+ icons
Font Mode: Create text-based icons with 2,000+ Google Fonts

Toggle between modes using the switch at the top of the sidebar.

Step 2: Select Your Base

For Icon Mode:

Browse icon collections in the sidebar
Use the search bar to find specific icons
Click an icon to select it

For Font Mode:

Enter your text (letters, numbers, or symbols)
Browse and select a font from the library
Use filters to find fonts by style or language

Step 3: Customize Your Design

Use the customization panel to adjust:

Size & Position: Resize and reposition your icon or text
Colors: Set foreground colors with the color picker
Background: Choose solid colors or create gradients
Border: Add rounded corners and border strokes
Shadows: Apply drop shadows and inner shadows

All changes are reflected in real-time on the preview canvas.

Step 4: Export Your Icon

Click the Download button
Select your target platforms (iOS, Android, Web, etc.)
Choose export formats (PNG, SVG, ICO)
Click Download to get a ZIP file with all sizes

Interface Overview

Mode Toggle: Switch between Icon and Font modes
Library Browser: Browse icons or fonts
Search: Find specific items quickly

Canvas (Center)

Live Preview: See your icon in real-time
Zoom Controls: Adjust preview scale (25% - 200%)

Settings Panel (Right)

Icon/Text Settings: Size, rotation, position, color
Background Settings: Solid or gradient backgrounds
Border Settings: Radius, width, and colors
Shadow Settings: Drop shadows and inner shadows

Tips for Great Icons

Keep it Simple: App icons are viewed at small sizes. Simple designs work best.
High Contrast: Ensure your icon stands out against various backgrounds.
Test at Multiple Sizes: Preview at different scales to ensure readability.
Use Consistent Padding: Leave some space around your icon within the border.
Consider Platform Guidelines: iOS prefers rounded corners, Android uses adaptive icons.

Next Steps

Learn about Icon Mode customization options
Explore Font Mode for text-based icons
Understand Export Options for different platforms