icon-set-creator

al weight.
---

# Icon Set Creator

This skill provides frameworks for generating consistent, cohesive icon sets using fal.ai FLUX.1 model.

## When to Use

- Building feature/benefit sections with icons
- Creating visual elements for landing pages
- Developing icon libraries for a project
- Ensuring iconography consistency across pages
- Generating custom icons that match brand style

## Why Icon Consistency Matters

- **Inconsistent icons look unprofessional**
- Consistent style reinforces brand
- Visual coherence improves trust
- Well-designed icons improve scannability
- Custom icons differentiate from competitors

## Icon Style Categories

### 1. Flat/Minimal Icons

```
Style: Clean, geometric, single color
Best for: Modern SaaS, professional services
Prompt modifier: "minimalist flat icon, single color, geometric shapes"
```

### 2. Gradient Icons

```
Style: Depth through gradients, modern feel
Best for: Tech products, modern brands
Prompt modifier: "gradient icon, smooth color transition, modern 3D feel"
```

### 3. Outlined Icons

```
Style: Line-based, open, light
Best for: Documentation, light interfaces
Prompt modifier: "outlined icon, thin strokes, open design, line art"
```

### 4. Filled Icons

```
Style: Solid shapes, bold, high contrast
Best for: CTAs, emphasis, dark backgrounds
Prompt modifier: "solid filled icon, bold shapes, high contrast"
```

### 5. Duotone Icons

```
Style: Two colors/tones, depth
Best for: Feature sections, marketing pages
Prompt modifier: "duotone icon, two-tone color scheme, layered depth"
```

## Icon Set Workflow

### Step 1: Define Requirements

- How many icons needed?
- What concepts/features do they represent?
- What style fits the brand?
- What size will they display?

### Step 2: Establish Style Guide

Create a base prompt that all icons will share:

```
[STYLE]: [flat/gradient/outlined/filled/duotone]
[COLOR]: [primary color with hex]
[BACKGROUND]: [white/transparent/colored]
[SHAPE]: [rounded/sharp/geometric]
[WEIGHT]: [light/medium/bold]
```

### Step 3: Generate First Icon

Create one icon and refine the prompt until perfect. This becomes your reference.

### Step 4: Batch Generate Remaining Icons

Use the refined base prompt, only changing the subject for each icon.

### Step 5: Review for Consistency

Check all icons together for:
- Same visual weight
- Consistent color saturation
- Similar level of detail
- Matching corner radii
- Equal perceived size

## Prompt Engineering for Icons

### Base Prompt Template

```
[style] icon of [subject], [color specification], clean white background, centered composition, consistent line weight, professional quality, high resolution, vector style
```

### Example Base Prompt (Flat Style)

```
Minimalist flat icon of [SUBJECT], blue (#2563eb) monochrome, clean white background, simple geometric shapes, centered, consistent 2px line weight, professional vector style, high quality
```

### Subject Substitution

Replace `[SUBJECT]` with specific concept:
- "rocket ship" for Growth/Launch
- "shield with checkmark" for Security
- "gear cog" for Settings/Automation
- "bar chart trending up" for Analytics
- "envelope" for Email/Communication
- "user group" for Team/Community
- "clock" for Time/Speed
- "target bullseye" for Goals/Precision

## Common Icon Categories

### Feature Icons

| Concept | Subject Description |
|---------|---------------------|
| Speed | "lightning bolt" or "speedometer" |
| Security | "shield with checkmark" |
| Analytics | "bar chart" or "pie chart" |
| Integration | "connected puzzle pieces" |
| Automation | "gear cogs" or "workflow arrows" |
| Support | "headset" or "chat bubble" |

### Benefit Icons

| Concept | Subject Description |
|---------|---------------------|
| Save Time | "clock with checkmark" |
| Save Money | "piggy bank" or "dollar sign" |
| Growth | "upward trending arrow" |
| Simplicity | "single click" or "magic wand" |
| Reliability | "shield" or "checkmark badge" |
| Results | "trophy" or "target" |

### Process/Step Icons

| Concept | Subject Description |
|---------|---------------------|
| Step 1/Start | "play button" or "starting flag" |
| Configure | "sliders" or "settings gear" |
| Connect | "chain link" or "plug" |
| Launch | "rocket" or "arrow up" |
| Complete | "checkmark" or "celebration" |

## Recommended Dimensions

| Use Case | Size | Notes |
|----------|------|-------|
| Feature grid | 64×64px | Most common |
| Large features | 96×96px | Hero-adjacent |
| Inline icons | 24×24px | Text alongside |
| Nav icons | 20×20px | Navigation elements |
| Generation | 256×256px | Generate larger, scale down |

**Always generate at 256×256px or larger, then scale down for crisp results.**

## Style-Specific Prompts

### Flat/Minimal (Lead Gen Jay Default)

```
Minimalist flat icon of [subject], blue (#2563eb) fill color, clean white background, simple geometric shapes only, no gradients, no shadows, centered composition, professional vector style, high quality
```

### Modern Gradient

```
Modern gradient icon of [subject], gradient from navy blue (#1e3a8a) to bright blue (#3b82f6), subtle 3D depth, soft shadow, clean light background, contemporary design, high quality
```

### Outlined/Line

```
Clean outlined icon of [subject], thin blue (#2563eb) strokes only, no fill, consistent 2px line weight, rounded corners, white background, minimalist line art style, high quality
```

### Duotone

```
Duotone icon of [subject], primary blue (#2563eb) with light blue (#93c5fd) secondary, layered design, subtle depth, clean white background, modern two-tone style, high quality
```

## Consistency Checklist

Before finalizing an icon set, verify:

- [ ] All icons use same style (flat/gradient/etc.)
- [ ] Colors match exactly (same hex codes)
- [ ] Visual weight is consistent
- [ ] Level of detail is similar
- [ ] Corner radii match
- [ ] Line weights are equal
- [ ] Icons appear same size when displayed together
- [ ] All have same background treatment

## Implementation in Code

### Using Generated Icons

```tsx
// Feature section with icons
const features = [
  { icon: "/icons/analytics.png", title: "Smart Analytics", description: "..." },
  { icon: "/icons/automation.png", title: "Automation", description: "..." },
  { icon: "/icons/security.png", title: "Security", description: "..." },
];

<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
  {features.map((feature) => (
    <div key={feature.title} className="text-center">
      <div className="w-16 h-16 mx-auto mb-4">
        <Image src={feature.icon} alt="" width={64} height={64} />
      </div>
      <h3 className="font-semibold mb-2">{feature.title}</h3>
      <p className="text-muted-foreground">{feature.description}</p>
    </div>
  ))}
</div>
```

### Icon with Background Circle

```tsx
<div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
  <Image src="/icons/feature.png" alt="" width={24} height={24} />
</div>
```

## Troubleshooting

### Icons Look Inconsistent

- Use exact same base prompt
- Generate all in same session
- Check color hex codes match
- Ensure same style keywords

### Icons Too Detailed

- Add "simple", "minimal", "clean" to prompt
- Specify "few elements only"
- Remove unnecessary descriptors

### Wrong Color

- Always specify hex code: `blue (#2563eb)`
- Add "monochrome" for single-color
- Avoid color words without hex (blue varies)

### Icons Look Different Sizes

- All should be generated at same dimensions
- Check padding/margins are consistent
- Use same "centered composition" modifier

## Integration with Other Skills

This skill works with:
- **brand-image-generator** - Foundation for all visual consistency
- **hero-section-designer** - Icons in hero feature callouts
- **landing-page-auditor** - Visual consistency scoring

## Reference Materials

For prompt templates by icon style, consult:
- `references/icon-prompts.md` - Ready-to-use prompts for different icon styles