Skip to content

Icon

Status: Stable

Latest released: May 2020

Current version: v5.24.2

Storybook
GitHub

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


Icon sets

There are three icon sets, each serving a specific purpose. See Currency's iconography foundation page to learn more about we approach icons.

nerdwallet-ui

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 "small" or "medium" sizes.

nerdwallet-brand/nerdwallet-brand-small

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-brand icons are designed to be displayed at size "x-large".
  • nerdwallet-brand-small icons have a simplified visual design suitable for display at size "large".

nerdwallet-ui

Account

Back

Bills

Clear

Close

CreditOff

CreditOn

Deposit

Details

Entertainment

Error

ExternalLink

FeedbackSuccess

Fees

Forward

Groceries

Health

HomeOff

HomeOn

MarketOff

MarketOn

Menu

Other

Phone

RatingEmpty

RatingFull

RatingHalf

Restaurants

RewardsOff

RewardsOn

Search

SelectHide

SelectReveal

Settings

Shopping

ShowHide

ShowReveal

Store

Transportation

Travel

Utilities

WalletOff

WalletOn

nerdwallet-brand-small

Analyze401KSmall

ApprovedSmall

AskExpertsSmall

AutoInsuranceSmall

AutoLoansSmall

BadCreditSmall

BalanceTransferSmall

BankingSmall

BusinessInsuranceSmall

BusinessLoansSmall

BusinessSmall

CalculatorSmall

CashBackSmall

CashFlowSmall

CdRatesSmall

CompareSmall

CreditCardSmall

CreditScoreSmall

DebtSmall

HealthInsuranceSmall

HomeInsuranceSmall

InsuranceSmall

InvestmentSmall

LifeInsuranceSmall

LowInterestSmall

MaximizeRewardsSmall

MortgageSmall

NetWorthSmall

OnlineBrokerSmall

PersonalLoansSmall

RewardsSmall

RoboAdvisorSmall

SavingsSmall

SearchMortgageSmall

StudentLoansSmall

TaxesSmall

TravelSmall

ZeroPercentSmall

nerdwallet-brand

Analyze401K

Approved

AskExperts

AutoInsurance

AutoLoans

BadCredit

BalanceTransfer

Banking

Business

BusinessInsurance

BusinessLoans

Calculator

CashBack

CashFlow

CdRates

Compare

CreditCard

CreditScore

Debt

HealthInsurance

HomeInsurance

Insurance

Investment

LifeInsurance

LowInterest

MaximizeRewards

Mortgage

NetWorth

OnlineBroker

PersonalLoans

Rewards

RoboAdvisor

Savings

SearchMortgage

StudentLoans

Taxes

Travel

ZeroPercent


Accessibility

Unlike some images, by default icons should not convey meaning; they should be decorative. Because of this, by default we apply aria-hidden=true and 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:

// Somewhere within a product app...
import Search from '@nerdwallet/react-icon/nerdwallet-ui/Search';
// And then in render...
<button aria-label="Search">
<Search />
</button>

That said, it's not recommended to use only icons to label UI elements.


Development

import AccountIcon from '@nerdwallet/react-icon/nerdwallet-ui/Account';
<AccountIcon size="small" />;

Using the "small"/"medium"/"large"/"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.

Inline

If you're showing an icon inline with other text, you can use the textAligned prop to automatically adjust the vertical alignment of the icon to look better next to text:

import Search from '@nerdwallet/react-icon/nerdwallet-ui/Search';
<span>
Enter search text:
<Search size="small" textAligned />
</span>

Props

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

<Icon>

size

"small" | "medium" | "large" | "x-large" | number | string

Size of the icon, either one of the predefined sizes (preferred) or in pixels.


color

= currentcolor

string

The color of the icon.


className

string

Additional CSS classes to apply to the icon.


textAligned

boolean

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