Creating Custom Icon Sets: Best Practices for 2026 Designers
Off-the-shelf icon libraries cover 80 % of use cases. The remaining 20 %—your product's unique actions, industry-specific concepts, branded metaphors—demand a custom set. Here's how to build one that scales without visual debt.
What You'll Learn
- How to establish a grid, keyline, and stroke system
- Rules for visual consistency across dozens (or hundreds) of glyphs
- Export and distribution workflows for design and engineering teams
Step 1: Define Your Grid
Every icon in the set lives on the same canvas. The industry standard is 24×24 px with a 2 px padding (safe area), giving you a 20×20 px active area.
| Parameter | Value |
|---|---|
| Canvas | 24×24 px |
| Safe area padding | 2 px per side |
| Active area | 20×20 px |
| Grid subdivisions | 1 px (24 columns × 24 rows) |
Keyline Shapes
Within the active area, define keyline templates for common silhouettes:
- Circle: 20 px diameter, centred
- Square: 18×18 px, centred (slightly smaller to match circle's optical weight)
- Landscape rectangle: 20×16 px
- Portrait rectangle: 16×20 px
Keylines ensure a house icon and a circular avatar icon feel the same size even though their bounding boxes differ.
Step 2: Lock Down Stroke Rules
Inconsistent stroke weight is the fastest way to make a set look amateur.
- Weight: Pick one. 2 px is versatile (1.5 px for dense UIs, 2.5 px for friendly/consumer apps).
- Cap: Round caps for friendly sets, butt caps for technical/sharp sets.
- Join: Round joins match round caps; miter joins match butt caps.
- Corner radius: 2 px default. Use 0 px only for intentionally sharp corners.
Document these in a shared style guide—Figma component properties or a markdown spec.
Step 3: Establish Optical Corrections
Geometric perfection ≠ visual perfection. Apply these optical adjustments:
- Circles look smaller than squares at the same width—scale circles up by ~2 %.
- Triangles / arrows need to shift slightly right/down to appear centred.
- Open shapes (like a speech bubble without a bottom edge) need heavier strokes to match the visual weight of closed shapes.
Step 4: Design in Batches
Don't try to draw 200 icons in one sprint. Work in themed batches:
| Batch | Glyphs | Timeline |
|---|---|---|
| Navigation (arrows, menu, close, search) | 15–20 | Week 1 |
| Actions (edit, delete, share, download) | 15–20 | Week 2 |
| Status (success, warning, error, info) | 8–12 | Week 3 |
| Domain-specific (custom product concepts) | Varies | Ongoing |
After each batch, review against the grid and stroke rules. Catch drift early.
Step 5: Export Workflow
| Format | Use Case | Settings |
|---|---|---|
| SVG | Web, design handoff | SVGO-optimised, currentColor fill |
| PNG @1x, @2x | Email, legacy platforms | 24 px and 48 px |
| ICO | Favicons, Windows apps | 16/32/48 multi-res |
| React/Vue components | Frontend frameworks | Generated from SVG source |
Automate exports with a script or CI job. Never manually export—it introduces inconsistency.
The Icojoy tools page includes format converters to streamline this pipeline.
Step 6: Distribute and Document
- Design team: Publish as a Figma library with search-friendly names.
- Engineering: Ship as an npm package or a
/icons/directory with an index file. - Both: Maintain a visual catalogue (like a Storybook or the Icojoy icon browser) where anyone can search and preview.
See how production icon sets are structured in the Icojoy packs section for real-world reference.
Common Mistakes
- ❌ Mixing stroke and fill styles in the same set
- ❌ Using pixel-aligned shapes on a fractional grid
- ❌ Forgetting to include a "no result" / empty-state icon
- ❌ Naming icons by appearance ("circle-arrow") instead of function ("refresh")
- ❌ Shipping without clear licensing terms
FAQ
How many icons should a custom set include at launch? Start with 60–80 covering navigation, actions, and status. Expand based on product needs. Most mature sets reach 200–400.
Should I use a 24 px or 20 px grid? 24 px is the dominant standard. It divides cleanly (12, 8, 6, 4, 3, 2 px) and matches the default sizing in most UI frameworks.
Outline or filled icons? Provide both. Use outline for default state and filled for active/selected state. This is now a standard pattern in Material, iOS, and most design systems.
How do I handle multi-colour icons in a currentColor system?
Limit multi-colour to a secondary variant. The primary set should be mono-colour (currentColor) for maximum theme flexibility.
Can I sell a custom icon set I designed? Yes, provided you own all the artwork. Review the Icojoy licensing page for examples of how licensing models are typically structured for icon sets.