Rely on a library of assets
Assets are the next step up in the design system, and rely on design tokens. They could be icons, illustrations, or even a logo.
The same way consistency is important in design tokens, consistency is important in your assets. The assets in your design system should rely on your tokens for things like border width, color, size, and roundedness. If designs are one way somewhere, they should be that way everywhere.
Look at how this UI (especially the side navigation) looks when you take icons from different icon sets, compared to using a consistent set of icons.
Environments
- Inconsistent icon strokes makes some icons stand out more than others.
- Icons all from a single icon library rely on same roundness and stroke sizes keeping icons equal.
- Consistency in iconography keeps attention away from icons and on textual content.
If we pull out the icons used in each these differences become especially apparent.
The side navigation uses 5 different icons, each with a different visual weight, one of them is even filled when it's not selected. Be careful of these kinds of visual distinctions as they can create different levels of importance between elements. By using icons that only come from a single library—in this case Feather Icons—it ensures that each icon has the same visual weight/importance on screen.
Pay attention to how each icon in the side navigation has issues:
- the logo hexagon icon's weight doesn't match the logo type
- the home icon's weight is too thick, making it stand out more than everything except the team icon
- the dashboard icon is very hard to see in a small size, this icon looks more suited for bigger sizes
- the team icon is filled in drawing the most attention to it, when it should be equal with the other navigation items
- the settings icon is just almost right but uses hard edges instead of rounded ones like other icons do
Even small details like the "View DNS" button use a different external link icon than the cards in the main section.
Environments
Environments
As you can see looking at the examples side by side, it gives a total level of completeness in the example with matching icon stroke widths and borders.
By relying only on icons from a chosen icon library (or if you're feeling extra ambitious, one you've made yourself), you'll make sure you keep the consistency that good UIs should have. Designers (if you work with them) will be paying attention to this as they create icons. If you are designing your app, use an existing library, there are many available for free!
You might think it's enough to coerce an icon into your desired stroke width, however you'll find that icons from different libraries have other definitions built into them, like rounded corners, outlined vs filled, or even colored. If you start pulling custom icons from other locations you're almost guaranteed to lose out on consistency in your UI.
Other important assets that should be in your library include illustrations and your logo. If you are looking for royalty free assets like illustrations or photos you should be sure to find assets that have similar lighting, color, or framing for the same reasons.
Additional Resources
The following links include some popular icon libraries and illustration products.