Icons at NerdWallet are used as visual cues to help a user interact with the interface. Visit the icons component page to view icon components.
What you need to know
- Icons are always associated with an action (e.g., card, text link, UI control).
- Don't use icons as decorative elements or as an illustration.
- Follow established icon metaphors.
- If a concept is too abstract to be easily represented, contact BST or Currency team or file a design ticket here.
Brand vs UI Icons
Icons are only used when paired with an action (eg., card, text link, UI control). Icons include labels when the usage is more complex (e.g. category, navigation).
There are two groups of icons, each serving a specific purpose:
Brand icons are exclusively used to direct users to NerdWallet's various financial verticals. They appear within interactive cards on high-level product pages and at the bottom of articles or tools to cross-sell related content.
Currency icons set expectations about available UI controls. They're used in product experiences and leverage known conventions.
All Icons use the following characteristics:
An icon starts with the metaphor. As described in the dos and don'ts section, a metaphor should follow the guidelines below:
- Universally understood, clear, and easy to get.
- Inclusive and neutral.
- Exact when possible. This won't always be the case, especially with finance, so select a representation that's logically related.
- Utilize known icons or patterns.
- Focus on simplicity.
Currently, each brand and UI icon has a single standard variant.
In the future, we're going to introduce a Small variant for
nerdwallet-brand icons, which teams will
use depending on the context of their experiences they're buildling.
Both mobile and desktop icons use
space-1 for their inner padding.
Both large and small icons have a 1px stroke.
Icons are flat with a single solid color.
Designing with Brand Icons
- Shoot for one or two words.
- Use sentence case or all caps, depending on the placement.
- Don't use ending punctuation.
Currency UI Icons
Icons and labels indicate conventional actions (menu, back, close, etc.).
Icons and labels illustrate types of transactions. These icons are reserved for a few experiences including Cash flow and Optimize.
Reserved for high-level wayfinding (tab-nav on native and mWeb); these icons only appear in navigation and should never be used for other solutions.
Used for feedback to and from the user.