Icons and illustration as part of the system

Icon system design is three choices: a stroke, a grid, and a subject matter. Make them once. Every symbol you add after that has to obey them. Mixing three icon styles is how a product starts to look assembled from downloads, even when each download was attractive on its own page.

The set is part of the system because it repeats. A logo appears a few times. An icon appears beside every action. If those small marks disagree, the interface feels noisier than the layout deserves. People may not name the problem. They will feel that the product was put together in a hurry.

Stroke, grid, and the details that show

Pick a stroke and keep it. On a small grid, a two-pixel stroke and a one-and-a-half-pixel stroke do not look like a subtle brand difference. They look like two families. Pick rounded caps or square caps. Pick corners that match the radius you already use on buttons, or pick sharp corners on purpose because the brand is sharp. Then stop adjusting per icon.

The grid is usually 24 pixels for product icons, with a smaller size derived from it, not drawn as a separate fashion. Draw on the same pixel grid so strokes sit on whole pixels where you can. Optical corrections are allowed: a circle often needs to be slightly larger than a square to look the same size. The correction is a rule, applied every time, not a fresh negotiation.

Decide filled or outline, and treat the other as a rare exception. A set that mixes filled alerts with outline actions can work if the rule is "filled means status, outline means action." A set that mixes them because two people used two libraries will not look ruled. It will look busy. If you need a selected state, prefer a shift you already defined, such as a stronger color or a filled variant of the same drawing, over a different metaphor.

Color should not be baked into the file as a private hex. Icons inherit the text color beside them, or a named status color when the icon is the status. A green check and a red warning can be tokens. A unique teal inside one SVG is drift with a picture attached.

Subject matter, and what you will not draw

Style is only half of the set. Subject matter is the rest. Choose the kind of world the symbols come from, and write down what you will not depict.

A writing product might use desks, pages, and marks. A sports brand might use equipment and the field. A calm goods brand might use almost no icons at all, because each extra symbol makes the page louder. Wabisabi, a public Hanabi brand site, is the kind of visual world where a busy icon set would fight the calm. The decision there is restraint. Another product can decide on a denser set. The failure is deciding nothing and searching a marketplace every time a button needs a picture.

Limit metaphors. One symbol per idea. If "delete" is a trash can, it is not also an x on some screens and a minus on others. Synonyms in icons are as confusing as synonyms in buttons. When you are tempted to draw a clever metaphor for a feature nobody knows yet, use a word. An icon cannot carry a new concept on its own. It can only remind people of a concept they already have.

Keep a short inventory, named. Add an icon when a second screen needs it. An inventory of three hundred icons, installed on day one, invites people to pick at random. A shelf of twenty that match will outlast it.

Illustration is a different asset

Illustration lives at a larger size and a lower frequency. Empty states, a launch announcement, a page that would otherwise be a wall of text. It can share a palette and a level of detail with the icons. It should not share their job. An illustration inside a button is a second logo. An icon blown up to fill an empty state looks like a placeholder you forgot to replace.

Direct the illustration the way you direct photography. Subject, crop, and a list of what you will not show. If people in the drawings have a particular level of realism, keep it. If the work is geometric, do not drop in a textured character from another set for one campaign. Campaigns are where sets go to break, because the asset is made quickly and then left on the site.

Store illustrations with the same care as icons: named files, a known aspect, and a note about whether they can sit on a dark surface. A drawing that only works on white will betray the dark theme the moment you add one. If you do not have a dark theme, you can still avoid illustrations that depend on a specific background you are about to change.

How the files enter the product

One directory. One way to use them. In a React and TypeScript codebase, that is a single component that takes a name and a size, and sets the stroke to current color. Screens do not paste SVG blobs with their own width and fill. Pasted blobs are how the third style arrives "just for this page."

Size is a token, not a guess. Use the grid size in buttons and fields. Use a defined larger size only where the layout already has a slot, such as an empty state. Scaling an icon to 13 pixels because the row was tight will blur the stroke and break the grid. Tighten the row, or accept the size you chose.

Review new icons as you review new components. Does it use the stroke? Does it sit on the grid? Is the metaphor already taken? A ten-minute check saves a month of mixed metaphors. The person drawing it can be anyone on the team. The person accepting it should be the same owner who accepts a new color, so the system stays one list.

Names, and when the picture is decoration

Some icons carry the meaning. An icon-only button has to have a text alternative, or a person using a screen reader gets silence. Some icons repeat a word that is already visible. Those should not be announced twice. The W3C's Web Content Accessibility Guidelines are the reference for this distinction: content people need should be perceivable, and decoration should not get in the way. In the component, that becomes a concrete rule. If the icon is the label, give it an accessible name. If the word next to it is the label, hide the icon from assistive technology.

Write that rule in the icon component, not in a policy document. The next engineer will copy the last call site. Make the last call site correct. Decorative sets that are beautiful and unnamed will fail the first time they are used as the only label on a control. Functional sets that are slightly plain will survive.

The wider visual direction, including photography, sits beside this choice. When you are setting subject and crop for the whole brand, read photography and illustration direction for a young brand. Icons are the small end of that same decision.

Hanabi folds the icon set into the system while the interface is being built. You can see that kind of work listed with Hanabi's services. The aim is one stroke, one grid, and a short shelf of symbols the product will still recognize in a year.