Icon

Render system icons, branded partner icons, and the Volvo wordmark using components from @volvo-cars/react-icons.

@volvo-cars/css v2.5.1@volvo-cars/react-icons v4.0.0

Icon Sizes

Show codeHide code

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

Icon Colors

Show codeHide code

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

Icon Filled

Show codeHide code

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

Branded Icon Example

Show codeHide code

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

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

Wordmark Example

Show codeHide code

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

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

Custom masked icon

Show codeHide code

<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;);
  "
/>

Custom inline SVG

Show codeHide code

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