Skip to content

Icon

Status: Stable

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

Add

Back

Bills

BillsActive

Clear

Close

CreditOff

CreditOn

Deposit

DepositActive

Details

Entertainment

EntertainmentActive

Error

ExternalLink

FeedbackSuccess

Fees

FeesActive

Forward

Groceries

GroceriesActive

Health

HealthActive

HomeOff

HomeOn

Information

Link

Lock

LockActive

MarketOff

MarketOn

Menu

Other

OtherActive

Phone

RatingEmpty

RatingFull

RatingHalf

Restaurants

RestaurantsActive

RewardsOff

RewardsOn

Search

SelectHide

SelectReveal

Settings

Shopping

ShoppingActive

ShowHide

ShowReveal

Store

StoreActive

Transportation

TransportationActive

Travel

TravelActive

Utilities

UtilitiesActive

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/currency';
// 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

Sizing

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/currency';
<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.