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.
Unlike some images, by default icons should not convey meaning; they should be decorative. Because of this, by default we apply
focusable="false" on the rendered SVG.
However, like in most instances of building accessible interfaces, it depends on how the icon is being used. For example, if an icon is being used as an actionable button, ensure that a descriptive
aria-label is applied to the button:
That said, it's not recommended to use only icons to label UI elements.
If you're showing an icon inline with other text, you can use the
prop to automatically adjust the vertical alignment of the icon to look better
next to text:
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.