Icons at NerdWallet are used as visual cues to help a user interact with the interface. They are only used when paired with an action (eg., card, text link, ui control).
There are two groups of icons, each serving a very specific purpose:
nerdwallet-uisignal that an action is available within the interface; UI icons derived from Font Awesome
nerdwallet-brandhelp illustrate financial verticals and sub-categories – they appear in interactive Cards; Brand icons are custom designed by our internal team
- All icons trigger action
- Evaluate if the design can work without an icon before adding an icon to the experience
- Use an icon at a predefined size (in Figma and Storybook)
- Do not use an icon to fill white space and embellish a screen
- Do not rely on icons to convey meaning – an icon doesn’t always help and could add confusion
Designing or selecting icons:
- Leverage UI convention – if there’s an established symbol or metaphor, use it. Always.
- Leverage NerdWallet convention – if an icon is used for ‘mortgage’ go with that, don’t reinvent the wheel.
- Design for recognition – icons should be easy to comprehend. If a concept is too abstract to be easily represented with common imagery, maybe it shouldn’t be an icon.
- Design icons with inclusivity and longevity in mind – ensure that icons are culturally-sensitive, non-gendered, and timeless.
- NerdWallet UI – 16px, 24px
- Nerdwallet Brand desktop – 64px for HP. 56px for L2 pages.
- Nerdwallet Brand mobile web – 56 px for HP. 32px for L2 pages.