Make icons that fit your product

I can spend time getting a page's type, spacing, and colours right, then drop in an icon that feels as though it belongs to another product. It's a perfectly useful cog or trophy. It also carries someone else's choices about weight, corners, and personality.

Custom artwork has always been an option. Going into 2027, what feels different to me is how little ceremony a small custom icon now needs. With a capable LLM and a vector tool, making the right mark is becoming a reasonable part of building the interface.

Getting an icon on the page#

A scrappy interface might start with whatever symbols were handy: an arrow character, a star from a system font, an emoji where a little picture would help. Getting them to sit comfortably beside text took some adjusting.

Libraries made that work much easier. Font Awesome, Octicons, Bootstrap Icons, and others supplied coherent collections of familiar symbols. Pick one, add the icon, and carry on building.

Eventually you'd want a symbol that your chosen collection didn't quite have. Another library had a better version. You could bring in both, or use something like react-icons to reach several collections through one package.

Then came the delivery question. Use imports the bundler can analyse, and check that tree shaking removes unused exports from the production build. A large catalogue doesn't need to become a large download.

Finding a symbol and making it feel at home are different problems. A filled trophy beside a thin outline cog can look awkward even when both mean exactly the right thing. Making them the same colour only gets you so far.

Choose the visual rules#

I'd look at the interface before drawing anything. Its typography, buttons, borders, and illustrations have already made some decisions. The icons can carry those decisions into smaller spaces.

A page with fine rules and light type may suit open shapes and delicate contours. A tactile interface with broad forms and matte shading may want more substance. Even a familiar search icon can change character through the shape of its handle, the weight of its circle, and the space inside it.

Choose a few rules you can repeat: outline or filled, line weight, rounded or square ends, proportions, and how much detail survives at the intended size. Give the icon room around its edges, too. Two drawings on the same grid can feel very different if one fills the box and the other sits in the middle.

Those choices make a request more useful than asking for an icon that feels friendly or premium. They give you something concrete to judge the result against.

Start with a small set#

An LLM can draft SVG or work through a vector tool to build editable shapes. For a small, well-defined icon, getting a usable first drawing can be almost trivial now. I'd keep the process small enough to try while building the page:

1. Show the context. Supply a screenshot of the interface and a few approved drawings. State what each icon means, where it will appear, and its display size. A 24px toolbar mark has a different job from a large empty-state illustration.

2. Draft a small family. Ask for three or four icons together, including a simple symbol and something specific to the product. Describe your rules concretely: "24px SVGs, 2px strokes, rounded ends, one accent colour, no shading" could be a starting point for an outline set. Request editable shapes you can adjust.

3. Try them in place. Put the drawings into the actual buttons and rows, at their real size. Check them beside text, in light and dark themes, and on a phone. An impressive enlarged preview can hide a closed-up gap, a heavy stroke, or an awkward alignment.

4. Refine and keep the reference. Give specific feedback: widen that gap, lighten the contour, shorten the handle. Once the set works, keep the editable sources and a short note about its rules. Use the accepted drawings as references when adding the next icon.

I want to make those adjustments to a few icons before generating dozens. A small set is enough to reveal whether the style holds together, and it's much easier to change direction then.

Give colour a job#

Plan colour while drawing. currentColor can follow the surrounding text, while CSS custom properties can give separate regions their own roles. A contour might stay neutral while a small detail picks up the action colour or changes with selection.

Library SVGs can do this too. Custom artwork lets you choose the shapes and their colour roles together, including details that matter to your product. It's the same relationship I described in Build one theme or build three: the drawing can keep its identity while the palette changes.

A small example#

We're doing this at Nice Little Games. The controls borrow the larger illustrations' fine contours, pale surfaces, and restrained accents. The palette's paint dabs follow the chosen primary and secondary colours; the raccoon's scarf and clasp do the same. A few repeated decisions make different objects feel related.

Artwork palette

Jade / IrisPoppy / Lagoon

Theme

Games

Account

Spend the effort where people notice#

The controls still need to be clear. A close button should read as a close button, and labels, accessible names, and focus states keep their jobs. A small flourish earns its place when it makes something easier to understand or more pleasant to use.

This blog still uses library icons for its social links. I like them for prototypes, ordinary controls, and anywhere a familiar symbol already does the job. There's no need to replace every arrow to prove a point. A game mark, an empty state, or a little completion award is a more interesting place to spend the effort.

You can try the puzzles and see the artwork in context at Nice Little Games.