icon-set-creator

name	icon-set-creator
description	Create cohesive icon sets for landing pages using fal.ai FLUX.1. This skill should be used when building feature sections, benefit lists, or any visual elements requiring consistent iconography. Ensures all icons in a set share the same style, colors, and visual 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

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