Iconography

Bolt includes utility icons — a curated set of icons used throughout Nationwide applications to visually indicate functionality of buttons, links and interface controls. These are distinct from brand icons (abstract visualizations of products and services), which are managed separately by the brand team and are not included in Bolt.

Utility icons are visual shortcuts that support understanding without relying solely on text. Each icon should communicate a single, clear concept and be recognizable immediately.

Icons should support text, not replace it—especially for critical actions. Use icons to clarify actions, states or destinations, never for visual interest alone.

Icons must always be paired with text or have explicit accessible labels. Never rely on icons alone to communicate meaning.

Use utility icons when they:

• Reinforce an action or state that's already described in text
• Provide visual scanning landmarks in dense interfaces
• Support quick recognition of common actions (search, close, edit, delete)
• Help distinguish between similar items in lists or menus

Don't use icons when:

• Text alone is clearer or more specific
• The action is destructive or ambiguous (always pair with explicit labels)
• The icon metaphor may not be universally understood
• You're adding them purely for visual interest

Fluid sizing (default) is recommended for most use cases:

• Icons scale with adjacent typography, maintaining consistent visual rhythm
• Fluid icons work seamlessly with responsive typography across breakpoints
• Fluidity is ideal for icons paired with body text, headings or labels

Fixed sizing should be used when:

• Icon size must remain constant regardless of text size changes
• Icons appear without adjacent text
• Consistent icon dimensions are required across varied content (e.g., in tables or grids)

• Icons should align with adjacent text to maintain visual harmony
• Icons inherit text color via semantic tokens, ensuring they adapt across themes
• When pairing icons with text, place them consistently (before or after, not mixed)
• Maintain adequate spacing between icon and text for comfortable reading

Bolt's utility icons are already constructed to maintain visual consistency across the system—teams should not need to manually adjust icon geometry or alignment.

Always provide context for assistive technology:

• Use aria-label when an icon conveys meaning (e.g., a standalone search button)
• Mark decorative icons as aria-hidden="true" when text already describes the action

Respect target sizes:

• Interactive icons (buttons, links) must have a minimum 24px click target (WCAG 2.2 AA)
• Ideally, provide 48px targets for better usability on touch devices

Ensure accessibility:

• Icons must maintain ≥3:1 contrast ratio to adjacent colors
• Use semantic color tokens so icons adapt correctly across light, dark and system themes
• Test icon visibility in all density settings (Compact, Default, Sparse)

Bolt provides a comprehensive library of utility icons for common UI patterns. Before requesting a new icon:

• Check the complete icon list to verify it doesn't already exist
• Consider whether existing icons serve the same purpose
• Consult with your UX partner if you believe a new utility icon is needed

Don't create custom icons that deviate from Bolt's construction standards—this introduces visual inconsistency and maintenance burden across products.

Bolt's utility icon system improves recognition, reduces cognitive load and builds trust in the interface.

By providing a curated set of consistently constructed icons, Bolt ensures teams don't introduce fragmented or inconsistent iconography. Using icons correctly—paired with text, properly aligned and accessibly implemented—helps users navigate interfaces confidently across all Nationwide products.

Simple rule of thumb: If you're tempted to use an icon without text for a critical action, add the text.

The following icons can be used anywhere that accepts an icon name as a parameter.