Custom Icon Sets for Brands: When and How to Design Them

Icons are the smallest brand asset and the one people see most. A product UI might show dozens on a single screen. That's the case for designing your own, and also the reason a sloppy custom set does more damage than a good generic one. Here's how to decide, and how to build one that holds up.

Should a brand design a custom icon set?

Design a custom icon set when icons show up in your product and marketing often enough that their style becomes part of how people recognize you. For an early startup with a landing page and six feature cards, that's rarely true yet. For a SaaS product with navigation, empty states and settings full of icons, it often is.

Icons are one layer of your visual identity system, and they should follow the same logic as your type and shapes. If your wordmark has soft, rounded terminals and your icons are sharp and mechanical, the brand feels assembled from parts. A custom set closes that gap. A tuned library can close most of it for far less effort.

What goes into a brand iconography style guide?

A brand iconography style guide is the rulebook that makes icons drawn months apart by different people look like one family. It defines geometry, weight and behavior, and it's short enough that a designer can keep it open while drawing.

• Grid and live area. A base size such as 24 by 24 with padding, so every icon sits inside the same safe area.
• Keyline shapes. Standard circle, square and rectangle footprints so round and square icons feel the same visual size.
• Stroke weight. One weight at the base size, and whether it scales or stays fixed at other sizes.
• Corners and terminals. Corner radius, and whether line ends are round, square or butt.
• Fill rules. Outline only, filled only, or outline by default with filled for active states.
• Perspective and detail. Flat front view or slight angle, and the maximum number of elements per icon.
• Naming. A consistent pattern like category-object-modifier so search works in Figma and code.

Take cues from your logo and typeface. Stroke weight often matches the weight of your UI font at body size, and the corner radius can echo the rounding in your wordmark or buttons. Those small links are what make icons feel like the brand rather than a stock set.

How do you design a custom icon set step by step?

Design a custom icon set by building the system first and the icons second. Draw a small core set, test it in real screens, fix the rules, then scale. Teams that draw a hundred icons before testing ten usually redraw most of them.

1. 1

   Inventory what you need

   List every icon in the current product and site, plus the next roadmap features. Group by category: navigation, actions, objects, status.

2. 2

   Set the grid and keylines

   Choose the base size, padding and keyline shapes in Figma. Build them as a locked background frame every icon starts from.

3. 3

   Draw a core set of about 12

   Pick icons that stress the rules: something round, something square, something detailed, something with a diagonal. These decide the style.

4. 4

   Test in real UI

   Drop the core set into actual product screens and marketing sections next to your type. Check them at the smallest size they'll appear.

5. 5

   Lock the rules and scale

   Adjust stroke, corners and detail based on the test, write it into the style guide, then draw the rest of the inventory.

6. 6

   Package for design and code

   Make each icon a Figma component with variants for size and state, and export clean SVGs with consistent names for engineering.

How do custom icons for a website carry into the product UI?

Custom icons carry into the product when they're built as one source with size variants, not two separate sets. Marketing sites tend to use icons larger and more decoratively, while the product uses them small and functionally. The same family should cover both.

In practice that means a functional set at 16 to 24 pixels that follows the strict rules, plus an optional feature-icon treatment for marketing that places the same glyph inside a brand shape or color tile. The glyph is shared, so a feature on the site and the button in the app look related. This is a big part of brand consistency across website, product and deck, where icons are often the first thing to drift.

How much work is a custom icon set?

The work scales with the inventory and the number of variants, not the number of hours a designer wants to bill. A core set and style guide is a contained piece of work. A full product set with filled and outline states, multiple sizes and code export is closer to an ongoing system that grows with the product.

Plan for maintenance too. Every new feature needs icons that follow the rules, so someone must own the set after launch. That's the point where many teams realize a tuned library would have been enough, and others realize their product is distinctive enough to deserve its own language.

When is a custom icon set not worth it?

A custom icon set isn't worth it when your product is pre-launch, your UI changes weekly, or icons appear only as decoration on a few marketing sections. In those cases the cost of maintaining custom icons outweighs the brand gain, and a custom website vs template style decision applies: spend custom effort where people actually look.