Visuals

These are the visual assets that make up the NerdWallet brand. We’ve also linked helpful image libraries so it’s easy to find what you need.

Icons

Brand vs. UI icons

Brand icons are marketing icons that Brand Studio creates and are used to illustrate financial verticals and subcategories. They drive action, clarity and functionality – and bring personality and nerdiness to the experience.

We’ve identified a few key areas brand icons are used, though not limited to the following:

• Homepage tiles under the hero image
• Legacy cards on hub pages (also called L2 pages), that overlap the hero image
• Legacy cards at the bottom of article, calculator and tool pages that display a link where an icon can supplement understanding and text is immediately next to or below the icon. (Example linked is under “Other NW Resources”.)
Brand icon examples on the NerdWallet homepage
Homepage icon examples
Brand icon examples on a credit card page
Credit card page icon examples
Snapshot of brand icons
Brand icon set
UI icons set expectations about UI controls. They’re used in product experiences and leverage Font Awesome. An example would be categories in the spending feature. UI icons also include navigation and controls.

Below are a few key areas UI icons will show up, though not limited to the following:

• Controls – icons indicate conventional actions (menu, back, close, etc.)
• Categorization – icons and labels illustrate types of transactions, these icons are reserved for a few experiences including Spending & Rewards
• Navigation – icons 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
UI icon navigation examples in the native app
Navigation
UI icon categorization examples in recent transactions
Categorization
UI icon controls example in the mobile app
Controls
Snapshot of UI icons
UI icon sample set

Icon usage

Guiding principles

This is how we do icons at NerdWallet. Below, you’ll find the why, what, and how behind icon creation and usage.
Usage
• All icons should trigger action, so only use them when paired with an action (e.g., card, text link, UI control).
• Icons convey meaning and function. They should never be used on their own to drive understanding.
• See if the design can work without an icon before adding one to the experience.
• Don’t use an icon to embellish the layout. Icons do not serve a decorative function.
Design
• Icons should be easy to understand.
• If a concept is too abstract to be easily represented with common imagery, reconsider if it should be an icon.
• Leverage UI convention – if there’s an established symbol or metaphor, use it. Always.
• Design icons with inclusivity and longevity in mind – ensure that icons are culturally-sensitive, non-gendered, and timeless.

The dos and don’ts of icon usage

Icon usage example of navigation with icons and text placed together.
Do use text with icons whenever possible. Text should be placed immediately below or next to the icon. There will be exceptions to this rule, as is the case with control UI icons.
Icon usage example of using icons without text.
Don't use standalone icons. Icons alone are not enough to ensure comprehension.
Icon usage example of using icons to indicate action or interaction.
Do use icons to indicate interaction.
Icon usage example of a home icon used as a decoration..
Don't use icons as decorative elements.
Icon usage example of a card with an auto icon to indicate car insurance
Do use icons for simple, common actions.
Icon usage example of an icon failing to convey a complex topic
Don't use an icon when long explanations are needed or if an action is complicated.

Icon design guidelines

The dos and don’ts of designing icons

Icon design of a universally recognized calculator icon
Do use recognition over recall, and use metaphors that are recognized globally.
Icon design of a complex math problem as an icon.
Don't use abstract or obscure themes and metaphors. If there isn’t a literal representation of the metaphor, select the most logical idea that’s widely understood.
Icon design of a neutral theme of a row of bars scaling upward
Do use metaphors that are approachable, inclusive, and neutral in theme.
Icon design of a poo emoji
Don't use themes that are offensive, inappropriate or contentious.
Icon design of 2 icons of a simplified scale and credit score
Do keep the design and metaphor simple.
Icon design of overly detailed scale and credit score icons
Don't add too many details or elements. Avoid unreadable icons.
Four icons all using a shield as a common metaphor
Do be consistent. If you use a metaphor within a theme, carry that metaphor throughout.
Four icons all using different designs and metaphors
Don't vary the metaphors or be inconsistent with design choices.
Icon design within a 24 by 24 grid
Do design icons using the determined sizes and Currency spacing units.
Icon design in a non standard grid size
Don't resize an icon or the grid to a non-standard size.
Icons with a single, flat color
Do keep icon designs flat with a single solid color.
Icons with different colors, shadows, and gradients
Don't add embellishing details like shadows, gradients, or multiple color combinations.

Requesting a new icon

How do I request a new brand icon?

1. Use the iconography guidelines to determine if your request meets the criteria. BST and Currency can address questions using the #currency channel.

2. If approved, submit a Jira ticket to BST by selecting “Request an icon” in this request form. Under the components dropdown, select "Brand-Icon".

3. Provide as much detail in your request as possible, including:
• Where the icon will be placed – include context like screengrabs or Figma links.
• Any text and what action it's triggering. For example, if it links to a new page, provide the page link. This is important to include because we use this information to create the metaphor and design. Prototypes are helpful too.
• Timeline and due date

4. BST will hand off final deliverables to the FEI pod for implementation in react-icon.

How do I request a new UI icon?

1. Review the iconography guidelines to determine if your request meets the criteria. BST and Currency can address questions using the #currency channel.

2. If approved, the requester will explore icon options via the Font Awesome website. BST and Currency will approve the final selection. FontAwesome icons can serve as a frame of reference, but will need adjustments to stay consistent with our specs.

3. If Font Awesome does not have a supporting icon, submit a Jira ticket to Currency by selecting “Request an icon” in this request form. Under the components dropdown, select "UI-Icon".

4. Requester creates icon and submits for review and approval in the ticket.

5. BST and Currency will provide feedback. Use the #currency channel for an updated status or questions.

6. Requester will hand off final deliverables to the FEI pod for implementation in react-icon.

Designing icons

Brand icons artboard and grid

Artboard
Artboard sizes: 32x32 and 56x56

Padding
32x32 artboards include a 2 pixel padding. The live area for this artboard will be 28x28.

56x56 artboards include a 4 pixel padding. The live area for this artboard is 48x48.
Brand icon artboard size and live area
Grid
We leverage the Material design grid with some modifications for brand icon padding specifically.

Icon
Placed within grid to achieve visual consistency; maintain full-pixel dimensions.
(14 x 16px, not 14.22 x 15.88px)

Exporting
We export SVGs.

Implementation
64x64 (HP)
56x56px (L2 and mobile HP)
32 x 32px (mobile L2)

Keylines
There are 4 keyline shapes that guide in creating centered, balanced icons.
Brand keylines

UI icons artboard and grid

Artboard
Artboard size: 16x16

Padding
The artboard includes a 2px padding, so the live area to create icons is 12x12.
UI icon artboard size
Artboard size
UI icon 2 pixel padding
2px padding
UI icon live area
Live area
Grid
We leverage the Material design grid.

Icon
Placed within grid to achieve visually consistency; maintain full-pixel dimensions (e.g., 14 x 16px, not 14.22 x 15.88px).

Exporting
We export SVGs.

Implementation
16 x 16px

Keylines
There are 4 keyline shapes that guide in creating centered, balanced icons.
UI keylines

The metaphor

An icon starts with the metaphor. As described in the do’s 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

Designing brand icons

Design
Brand icons reflect our design principles. The simplicity and choice of lasting metaphors keep our icons relevant, and the rounded corners make them approachable and friendly. Aim for simplicity when designing an icon. This reduces clutter and aids in scaling.

Strokes
56px icons are set at 1.5px strokes with no fill.
32px icons are set at 1px strokes with no fill.
Strokes should be center aligned.
When designing, ensure you have a version of the working file that retains icon strokes to allow future editing.

Size
We create and export at two sizes: 32x32 and 56x56.
64x64 for HP icons.
56x56 for L2 pages (example here) and mobile HP.
32x32 for mobile L2 pages.
Artboard sizes are set with a border padding. 32x32 artboards include a 2 pixel padding, which gives a live working area of 28x28. 56x56 artboards include a 4 pixel padding, which gives a live area of 48x48.

Color
We design and export our icons as black (hex #000000). Icons will primarily be blue 500 (hex #005FB9), but green 500 (hex #008255) may be used in some instances with BST approval. A use case may be when the icons are the primary button or interactive element. When coded, eng will update the brand icons to their respective colors. This allows more flexibility in updating.

Gap
Approximately 5 px for single gaps
Approximately 3 px for split gaps
The above are guidelines and should be altered depending on the size and location of the gaps.
The gap’s location should never obscure the icon’s meaning, and will vary depending on the icon and design. When you have two overlapping elements, include gaps on either side where the overlap occurs. An example of this can be seen in the split gap graduation cap below. The size of the gap should be adjusted to create consistency in the larger system.
Example of an icon with a single gap
Single gap
Icon example with split gap
Split gap
Icon example with no gaps
No gap
Terminals and corner radius

Terminals and corner radii create a friendlier and more approachable aesthetic. Terminals are rounded using Illustrator or Figma’s cap settings.

The corner radius on the biggest elements are 3 pixels. 1 and 2 pixel rounding are used for smaller icon elements. On the smallest elements, we remove any rounding to ensure icons are discernible while scaling.
Screenshot of Illustrator cap and corner settings
Illustrator cap and corner settings
Screenshot of Figma cap and corner settings
Figma cap and corner settings

Designing UI icons

Design
UI icons are functional and are also intended to create clarity and an easy journey to accomplishing their goals. Focus on simplicity and adhere to the keylines and pixel grid used to create previous assets— this reduces clutter, aids in scaling, and helps create visual consistency throughout the set.

Strokes
1px stroke with no fill.
Strokes should always be set to the inside of the shape.
When designing, ensure you have a version of the working file that retains icon strokes to allow future editing.

Size
We create and export at one size: 16x16.
Artboard sizes are set with a 2 pixel border padding.

Color
We design and export our icons as black (hex #000000). When coded, eng will update the UI icons to blue (hex #005FB9). This allows more flexibility in updating color.

Gap
Since UI icons are smaller than brand icons, do not use gaps as they create unwanted negative space and obscure icons’ legibility. The exception is with certain filled icons where two overlapping objects will need to be separated. In these instances a gap of 1px should be incorporated.
Terminals and corner radius
When designing a new UI icon and before combining shapes, border radii should be set to 0 to maintain sharp edges and overall legibility. Once shapes are combined to create the final icon, the exterior corners should be set to .5 pixels. Interior corners should not be rounded. When a stroke intersects a shape, corners should not be rounded. This makes our UI icons friendly while maintaining overall legibility at small sizes.
Terminals and corner radius for UI icons

File locations

Figma:
• Working UI icon file
• Final UI icon components
• Final brand icon components

Illustrator:
• Working brand icon files in Dropbox
• This file is used to edit existing icons and create new ones.
• SVGs are exported from Illustrator and handed off to eng.
• Updated icons will also need to be added to Figma.

Accessibility

Screen readers
Include text-based equivalents for all icons.

Labels
Provide extra context to icons that don’t follow known standards (e.g. categories, navigation).

Title attribute
Describe the icon If a descriptive label isn’t visible to users.

Color
Follow Currency color direction for interactive elements (neutral or blue).

Contrast
Meet AA standards for Graphical Objects
• Icons should have at least a 3:1 contrast ratio against adjacent colors to meet AA standards. More information can be read here.