Icon

Status: Stable

Latest released: May 2020

Current version: v5.15.3

Storybook
GitHub

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-ui signal that an action is available within the interface; UI icons derived from Font Awesome
  • nerdwallet-brand help illustrate financial verticals and sub-categories – they appear in interactive Cards; Brand icons are custom designed by our internal team

Best practices:

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

Icon sizes:

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

Variants

nerdwallet-ui

Controls

Account

Back

Clear

Close

Details

Error

Menu

Search

SelectHide

SelectReveal

Settings

ShowHide

ShowReveal

Categorization

Bills

Deposit

Entertainment

Fees

Groceries

Health

Other

Restaurants

Shopping

Store

Transportation

Travel

Utilities

Deprecated

Check

Help

SelectDown

Navigation

CreditOff

CreditOn

HomeOff

HomeOn

MarketOff

MarketOn

RewardsOff

RewardsOn

WalletOff

WalletOn

Symbols

FeedbackSuccess

RatingEmpty

RatingFull

RatingHalf

nerdwallet-brand

Analyze401K

Approved

AskExperts

AutoInsurance

AutoLoans

BadCredit

BalanceTransfer

Banking

Business

BusinessInsurance

BusinessLoans

Calculator

CashBack

CdRates

Compare

CreditCard

CreditScore

HealthInsurance

HomeInsurance

Insurance

Investment

LifeInsurance

LowInterest

Mortgage

OnlineBroker

PersonalLoans

Rewards

RoboAdvisor

Savings

SearchMortgage

StudentLoans

Taxes

Travel

ZeroPercent

Development

import AccountIcon from '@nerdwallet/react-icon/nerdwallet-ui/Account';
<AccountIcon />;

Props

While there is no single <Icon> component, all icon components will support the following props:

<Icon>

size

number

Size of the icon, in pixels.


color

string

The color of the icon.

Default

currentcolor

className

string

Additional CSS classes to apply to the icon.


textAligned

boolean

Adjusts vertical alignment of the icon to look better next to text.