Customization

This guide covers all the customization options available in Iconfast for creating the perfect app icon.

Color Picker

Iconfast includes a powerful color picker with multiple input methods.

HSVA Controls

• Hue (H): Color wheel position (0-360°)
• Saturation (S): Color intensity (0-100%)
• Value (V): Brightness level (0-100%)
• Alpha (A): Transparency (0-100%)

Input Methods

• Visual Picker: Click and drag on the color field
• Sliders: Adjust individual HSVA values
• Hex Input: Enter exact color codes (#RRGGBB or #RRGGBBAA)

Gradient Editor

Create stunning gradients with the built-in gradient editor.

Gradient Types

Color Stops

• Add Stops: Click on the gradient bar to add colors
• Remove Stops: Drag stops off the bar to remove
• Position: Drag stops to adjust color positions
• Colors: Click a stop to change its color

Gradient Controls

• Angle: Rotate linear gradients (0-360°)
• Center Position: Adjust focal point for radial/angular
• Spread: Control gradient distribution

Background Settings

Solid Color

1. Click on the background color swatch
2. Use the color picker to select your color
3. Preview updates in real-time

Gradient Background

1. Toggle from "Solid" to "Gradient"
2. Select gradient type (Linear, Radial, Angular)
3. Add and position color stops
4. Adjust angle or center as needed

Border Customization

Border Radius

Control corner roundness with the radius slider:

Border Width

• 0 px: No border
• 1-3 px: Subtle border
• 4-10 px: Visible border
• 10-20 px: Bold border

Border Color

• Solid: Single color border
• Gradient: Gradient border effect

Shadow Effects

Drop Shadow

External shadow that appears behind the icon:

Tips:

• Small offset + low blur = subtle lift
• Large offset + high blur = dramatic depth
• Colored shadows create unique effects

Inner Shadow

Shadow inside the icon boundary for depth:

Tips:

• Light inner shadow = embossed effect
• Dark inner shadow = inset/pressed effect
• Multiple layers = complex depth

Layering Shadows

Combine multiple shadow layers for professional effects:

1. Base Shadow: Subtle, wide shadow for grounding
2. Accent Shadow: Tighter, darker shadow for definition
3. Inner Shadow: Adds depth and dimension

Preview Controls

Zoom Levels

Adjust preview scale to see your icon at different sizes:

• 25%: See how icon looks very small
• 50%: Small icon preview
• 100%: Actual size at current canvas size
• 150%: Enlarged view
• 200%: Maximum zoom for detail work

Preview Recommendations

1. Always check at 25-50% to ensure readability
2. Use 100% for general design work
3. Use 150-200% for fine detail adjustments

Keyboard Shortcuts

Speed up your workflow with these shortcuts:

Performance Tips

1. Start Simple: Begin with basic settings, add complexity gradually
2. Use Presets: If available, start from a preset and modify
3. Test Often: Check preview at multiple zoom levels
4. Save Favorites: Note settings for successful designs

Common Combinations

iOS Style

• Border radius: 22-25%
• Subtle gradient background
• No border
• Light drop shadow

Android Adaptive

• Border radius: 50% (circular)
• Solid or gradient background
• Icon with good padding
• Optional shadow

Windows Tile

• Border radius: 0% (square)
• Solid background
• High contrast icon
• No shadow

macOS Style

• Border radius: 18-20%
• Gradient background
• Subtle border
• Multiple shadow layers