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.
While there is no single
<Icon> component, all icon components will support the following props:
Size of the icon, in pixels.
The color of the icon.
Additional CSS classes to apply to the icon.
Adjusts vertical alignment of the icon to look better next to text.