Icon Set Creator

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

Benefit Icons

Process/Step Icons

Recommended Dimensions

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

// 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

<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