Icon

Icon from @volvo-cars/react-icons renders an icon img loaded from the Volvo Cars CDN. Pass icon to choose the icon and size to set its pixel dimensions.

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.

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

export function IconSizes() {
  return (
    <div className="flex gap-24 items-end">
      <Icon icon="car" size={12} />
      <Icon icon="car" size={16} />
      <Icon icon="car" size={24} />
      <Icon icon="car" size={32} />
      <Icon icon="car" size={40} />
      <Icon icon="car" size={48} />
      <Icon icon="car" size={64} />
      <Icon icon="car" size={80} />
    </div>
  );
}

Expand code Collapse code

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.

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

export function IconColors() {
  return (
    <div className="flex-col gap-16">
      <div className="flex gap-24 items-center flex-wrap">
        <Icon icon="car" size={24} />
        <Icon icon="car" size={24} color="secondary" />
        <Icon icon="car" size={24} color="accent-blue" />
        <Icon icon="car" size={24} color="feedback-green" />
        <Icon icon="car" size={24} color="feedback-orange" />
        <Icon icon="car" size={24} color="feedback-red" />
      </div>
      <div className="flex gap-24 items-center">
        <div className="p-16 bg-always-black border">
          <Icon icon="car" size={24} color="always-white" />
        </div>
        <div className="p-16 bg-always-white border">
          <Icon icon="car" size={24} color="always-black" />
        </div>
      </div>
    </div>
  );
}

Expand code Collapse code

Filled

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

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

export function IconFilled() {
  return (
    <div className="flex gap-24 items-center">
      <Icon icon="heart" size={24} />
      <Icon icon="heart" size={24} filled />
      <Icon icon="star" size={24} />
      <Icon icon="star" size={24} filled />
    </div>
  );
}

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.

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

export function BrandedIconExample() {
  return <BrandedIcon icon="figma" size={40} alt="Figma" />;
}

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

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

export function WordmarkExample() {
  return (
    <div className="flex-col gap-16">
      <Wordmark />
      <Wordmark height={16} />
    </div>
  );
}

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.

<img
  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M21 3H20V19H4V20H20V36H21V20L37 20V19L21 19V3Z'/%3E%3C/svg%3E"
  class="icon-mask"
  width="40"
  height="40"
  alt="Add item"
  style="
    --icon-url: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M21 3H20V19H4V20H20V36H21V20L37 20V19L21 19V3Z'/%3E%3C/svg%3E&quot;);
  "
/>

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.

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="40"
  height="40"
  viewBox="0 0 40 40"
  class="icon-sprite"
  role="img"
  aria-label="Add item"
>
  <path d="M21 3H20V19H4V20H20V36H21V20L37 20V19L21 19V3Z" />
</svg>

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

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>
  );
}

Expand code Collapse code

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.