What this tool does
Custom icon sets fail when they are commissioned piecemeal without a shared specification. This generator produces a complete icon set brief: a theme, a visual style, a stroke weight, a grid size, and a list of 20 concrete icon subjects relevant to that theme. The result is a brief you can hand to an illustrator or use as your own production checklist.
How it works
The generator pairs a chosen theme with a randomized but sensible specification. The visual style is drawn from line, filled, or duotone; the stroke weight and grid size are chosen as a matched pair (for example a 2-pixel stroke on a 24-pixel grid) so the values are always production-realistic. The 20 subjects are sampled without repetition from a theme-specific vocabulary, so a finance set suggests “invoice”, “wallet”, and “exchange rate” rather than generic shapes. All of this happens locally in your browser.
The three icon styles explained
Line icons use outlines only, with no fill inside the shape. They are the most neutral and versatile style — they work on both light and dark backgrounds and sit cleanly in dense UI contexts. The stroke weight defines the entire visual character. A 1.5px stroke feels delicate and editorial; a 2px stroke feels balanced for UI; a 2.5px or 3px stroke feels bold and accessible at small sizes.
Filled icons use solid shapes rather than outlines. They read more strongly at very small sizes and work well as status indicators and navigation items where visual weight is more important than detail. Filled styles are common in mobile navigation bars and toolbars.
Duotone icons use two tones of a single colour — usually a full-opacity primary shape and a reduced-opacity secondary accent. The result adds depth without introducing a second hue, making them flexible for single-colour design systems. Duotone is popular in SaaS dashboards and illustration-forward marketing sites.
Grid and stroke weight pairings
| Grid size | Recommended stroke | Use |
|---|---|---|
| 16px | 1.5px | Favicons, status dots, tiny inline contexts |
| 20px | 1.5–2px | Dense UI, data tables |
| 24px | 2px | The standard; most UI icon sets |
| 32px | 2–2.5px | Larger touch targets, illustration-weight contexts |
| 48px | 2.5–3px | Feature icons, marketing illustrations |
The tool generates matched pairs automatically, but understanding the logic lets you override if your design needs a different balance.
Making the brief work
Hand it to an illustrator verbatim. The brief includes everything an illustrator needs to start without back-and-forth: style, weight, grid, and a subject list. Share it as text or screenshot alongside colour values and reference icons from your existing design system.
Use the subject list as a production checklist. Work through the 20 subjects in order. Tick each one off as it reaches the “approved for export” state. Do not move to the next subject until the current one is approved — this prevents a backlog of “almost done” icons that block the final QA pass.
Draw the hardest subject first. Find the most visually complex icon in your list and draw it before anything else. If your style handles complexity gracefully, the rest of the set will be easier. If it does not, you will learn this before you have drawn nineteen easier icons.
Export at every size you will use, not just the design size. Many icons that look confident at 24px collapse to illegible blobs at 16px. Rasterize and review at your smallest deployment size before approving any icon.