Skip to content


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: nerdwallet-brand and nerdwallet-ui.

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

Copy guidelines

  • 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.

Design guidelines

DOUse an icon to indicate interactivity and signify the action.
EXCEPTIONIcons should rarely be used in decorative functions.
DOUse icons for simple, common actions.
DON'TUse an icon if a lot of explanation is needed to convey meaning.
DOUse labels with icons whenever possible.
DON'TUse an icon without a label when it is needed to convey meaning.
DOLeverage NerdWallet convention. If an icon is established for "mortgage", go with it.
DON'TUse the same icon in different contexts.