What is an icon library and how do you pick one?
An icon library is a set of icons drawn to one grid, weight and style. Learn what a good one keeps consistent and what to check before you adopt it.
An icon library is a set of icons drawn to the same rules, so they look like one family when you put them on a screen together. A good icon library keeps the grid, stroke weight, corner shape and picture style consistent across thousands of icons. Pick one by testing it against the icons your product needs, not by counting how many it has.
What does an icon library actually contain?
Icons, plus the rules that make them match. The icons are usually SVG files, and often come as React components or Figma components too. The rules are less visible: the canvas size, how close a shape can get to the edge, how thick the lines are, and how the ends of lines are cut.
A folder of icons collected from five places is not a library. It is a pile. The difference shows up the first time you put a bell next to a settings gear and one of them looks twice as heavy.
What should a good icon library keep consistent?
Four things.
- Grid. Every icon sits on the same canvas with the same padding. UIX icons use a 24 px grid with centrelines kept between 2 and 22.
- Weight. One stroke width across the set. The UIX Regular default is 1.5 on the 24 px grid.
- Corners. Round or sharp, chosen once. Rounded caps and joins feel softer, sharp ones feel more technical.
- Metaphors. One picture per idea, and the same picture every time. A magnifier means search everywhere. Two near-synonyms get two distinct pictures, so you never wonder which one you meant.
If you pick up an icon from the middle of the set and from the end of it, they should look drawn by the same hand on the same day.
Which formats should an icon library ship?
SVG at the very least. It is sharp at any size and takes colour from CSS. React components are convenient when your product is built in React, and design-tool components help designers use the same icons you ship. Icon fonts and PNG still exist, but they are the exception, and a later post on SVG vs icon font vs PNG explains why SVG wins in most cases.
Today you can copy any UIX icon as SVG from the icon browser in a free style, with no account. Packages for frameworks and design tools are marked coming soon on the site, so do not plan around them yet.
What should you check before adopting an icon library?
Run this short test before you commit to anything.
- Write down the ten icons you need this month. For example search, settings, bell, user, menu, trash, share, heart, calendar-check and lock.
- Search for each one. Is there a clear match, or do you settle for something close?
- Put them in a row at 16 px and at 24 px. Weight and detail should look even.
- Read the licence. Check that commercial use is allowed and what the terms say about redistribution. Read the terms yourself, and ask a lawyer if the stakes are high.
- Look at the styles. If your brand changes, can you switch to a heavier or lighter weight without redrawing the set?
A library that passes five out of five on your ten icons is worth more than one with a bigger number on its homepage.
How big should an icon library be?
Big enough to cover your product's vocabulary and small enough to stay consistent. Size is a poor measure on its own. What matters is how many different ideas the library covers, and whether each idea has one clean picture.
UIX Icons has 13,491 unique icons in 71 categories. Unique means one drawing per idea, and the 15 styles are not counted as extra icons. That gives 202,365 SVGs, but the number a designer should care about is the first one.
How are UIX icons licensed?
Three styles are free under the MIT licence: Regular Rounded, Regular Sharp and Solid. The other twelve styles are Pro. Details are on the licence page, and this is not legal advice.
For a closer look at the styles themselves, read how to choose an icon style. For sizing once you have picked a set, see the guide to UI icon size.
Questions
What is the difference between an icon set and an icon library?
In practice, none. People use both words for a collection of icons that share a style. "Library" tends to suggest a larger collection with search, naming rules and several formats.
How many icons does a typical app need?
Fewer than you might expect. Most products use a few dozen icons for navigation, actions and status, plus a handful for their own domain. The long tail matters when you need an icon for something specific.
Should I mix icons from two libraries?
Avoid it. Different grids and weights make the screen look unfinished. If a library lacks one icon, ask for it or draw it to match, not borrow a mismatched one.
Is a free icon library good enough for a commercial product?
It can be, if the licence allows commercial use and the set covers your needs. The three free UIX styles are MIT licensed, which allows commercial use under the licence terms.
