Icon

Icon renders a CDN-backed icon image. Pass icon to choose the asset and size to select its pixel dimensions.

Show codeHide code

import { Icon } from '@volvo-cars/react-icons';

export function IconDefault() {
  return (
    <div className="flex gap-24 items-center">
      <Icon icon="car" size={24} alt="Car" />
      <Icon icon="search" size={24} alt="Search" />
      <Icon icon="cogs" size={24} alt="Settings" />
      <Icon icon="heart" size={24} alt="Heart" />
    </div>
  );
}

Sizes

Available sizes: 12, 16, 24, 32, 40, 48, 64, and 80. Sizes 12 and 16 use a simplified icon asset with fewer details for legibility at small dimensions.

Colors

Icons default to the primary foreground color. Use color to override:

• currentColor or inherit: follows the parent element’s color, useful inside interactive elements like buttons.
• Named colors: primary, secondary, accent-blue, feedback-green, feedback-orange, feedback-red, always-white, always-black.

Filled

Set filled to use the filled variant, typically for active or selected states.

BrandedIcon

BrandedIcon renders partner and service icons (e.g. payment providers). These icons retain their original brand colors, are available in sizes 24, 32, and 40, and do not have a filled variant.

All icons

Browse the full Icon Library to see every available system icon and branded icon.

Wordmark

Wordmark renders the Volvo logo from the CDN. Set height to control the size (defaults to 8, width is automatically 13× the height).

Custom icons

CSS-only with icon-mask

Use the icon-mask class on an img to render a custom icon that inherits the parent color. Set --icon-url to the image source. width and height are required.

Inline SVG with icon-sprite

Use the icon-sprite class on an inline svg when you need to animate icon paths. fill is set to currentColor. width and height are required.

Accessibility

WCAG SC 1.1.1 requires icons to have a text alternative that serves the equivalent purpose. Set alt to describe the icon’s purpose in context. Describe the action or meaning, not the icon itself.

When an adjacent visible label already conveys the purpose, omit alt so the icon is treated as decorative (role="presentation" and aria-hidden="true" are applied automatically).

Service Manual

Show codeHide code

import { Icon } from '@volvo-cars/react-icons';

export function IconAccessibility() {
  return (
    <div className="flex-col gap-16">
      <div className="flex gap-8 items-center">
        <Icon icon="book" size={24} alt="Service Manual" />
      </div>
      <div className="flex gap-8 items-center">
        <Icon icon="book" size={24} />
        <span>Service Manual</span>
      </div>
    </div>
  );
}

For the Wordmark component, see the full WCAG audit.

Props

Icon

Prop	Type	Required	Default
icon	"code" | "link" | "map" | "menu" | "search" | "...	✓	-
The name of the icon in the 1.0 icon system.
size	12 | 16 | 24 | 32 | 40 | 48 | 64 | 80	✓	-
The size of the icon in pixels. Sizes 12 and 16 will use a smaller, simplified icon asset.
filled	boolean	-	false
Use the filled variant of the icon, typically for active or selected states.
color	IconColor	-	-
By default icons use the primary foreground color. To change color together with the surrounding text, such as when hovering a button, use `currentColor` or `inherit`.
className	string	-	-
Custom class name, merged with existing classes.
alt	string	-	-
Alternate text. May be omitted if the icon is purely decorational or if the alternate text is already present, such as in a button that already has a label.
loading	"eager" | "lazy"	-	lazy
The loading strategy for the icon image.
hidden	boolean	-	-
id	string	-	-
title	string	-	-
dir	string	-	-
lang	string	-	-
slot	string	-	-
style	CSSProperties	-	-
onAnimationEnd	AnimationEventHandler<HTMLImageElement>	-	-
onAnimationStart	AnimationEventHandler<HTMLImageElement>	-	-
onTransitionEnd	TransitionEventHandler<HTMLImageElement>	-	-

BrandedIcon

Prop	Type	Required	Default
icon	"amazon-key" | "american-express" | "android-au...	✓	-
The name of the icon.
size	24 | 32 | 40	✓	-
The size of the icon in pixels.
className	string	-	-
Custom class name, merged with existing classes.
alt	string	-	-
Alternate text. May be omitted if the alternate text is already present, such as in a button that already has a label.
loading	"eager" | "lazy"	-	lazy
Indicates how the browser should load the image. Prefer `lazy` for images below the fold or not immediately visible.
hidden	boolean	-	-
id	string	-	-
title	string	-	-
dir	string	-	-
lang	string	-	-
slot	string	-	-
style	CSSProperties	-	-
onAnimationEnd	AnimationEventHandler<HTMLImageElement>	-	-
onAnimationStart	AnimationEventHandler<HTMLImageElement>	-	-
onTransitionEnd	TransitionEventHandler<HTMLImageElement>	-	-

Wordmark

Prop	Type	Required	Default
className	string	-	-
role	AriaRole	-	-
alt	string	-	Volvo
Alternate text.
height	number	-	8
Set the height of the wordmark (use multiples of 8). The width will be set to 13 times the height.