Skip to content

Iconography

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

Usage

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:

Metaphors

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.

Sizes

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.

Padding

Both mobile and desktop icons use space-1 for their inner padding.

Stroke

Both large and small icons have a 1px stroke.

Color

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

Controls

Icons and labels indicate conventional actions (menu, back, close, etc.).

Categorization

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.

Symbols

Used for feedback to and from the user.


Design guidelines

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