We use icons at NerdWallet as visual cues to help a user interact with the interface. They should only be used when paired with an action (e.g., card, text link, UI control).
There are three icon sets, each serving a specific purpose. See Currency's iconography foundation page to learn more about we approach icons.
UI icons signal that an action is available within the interface. These icons are inspired by and derived from Font Awesome. UI icons have a single visual variant, and are generally used at either the
Brand icons Help illustrate financial verticals and sub-categories. They appear in interactive cards; brand icons are custom designed by our internal team. They have two variants:
nerdwallet-brandicons are designed to be displayed at size
nerdwallet-brand-smallicons have a simplified visual design suitable for display at size
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.
"x-large" for the
size prop is preferable to setting a size with pixels. Using the official sizes helps ensure consistency and ensures that icons scale along with a user's preferred font size, an important accessability feature. Ensure that the size you're using is appropriate for the icon set you're using; see the "Icon sets" section above for more details.
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:
"small" | "medium" | "large" | "x-large" | number | string
Size of the icon, either one of the predefined sizes (preferred) or 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.