CMS Design System

Icons help communicate meaning, actions, status, or feedback.

`<SvgIcon>`

The <SvgIcon> component is a re-usable component that wraps its children in an <svg> element. This component is used by each individual icon component listed below.

View Source File

Open in Storybook

Code snippet

Props

React Properties Documentation
Name	Type	Default	Description
`ariaHidden`	`boolean`	`true`	Describes the value of the `aria-hidden` attribute on the SVG. Defaulted to true with the assumption that most icons are decorative. If the icon does not have any associated label text, set this to `false` and ensure a `title` is provided for improved accessibility.
`className`	`string`		Additional CSS classes to be added to the svg element
`children`required	`React.ReactNode`		The elements that make up the SVG
`description`	`string`		Long-text description of any SVG. Use for complex icons, otherwise `title` prop will suffice.
`id`	`string`		A custom `id` attribute for the SVG
`inversed`	`boolean`	`false`	If `true` sets inverse fill color.
`title`required	`string`		The descriptive name for the SVG icon
`viewBox`	`string`		A string describing the viewbox of the SVG. It is recommended that the icon is centered and fill up the default viewport size. See this blog post for further explanation on viewBox and how to use it.

Icon color

Icon components support a few built-in color options that can be applied by using one of the following utility classes.

If you need a different color for an icon, you can pass a custom class to an icon component through the class prop. Then, in your application CSS, set the color prop.

Color	CSS utility Class	Example
Primary	`ds-c-icon-color--primary`
Inverse	`ds-c-icon-color--inverse`
Error	`ds-c-icon-color--error`
Warn	`ds-c-icon-color--warn`
Success	`ds-c-icon-color--success`

Icon size

Icon components use ems for their height and width and can thereby be sized by changing the font-size of the SVG element.

It is recommended that the font-size utilities be used.

Size	Example
Small
Default
Large
Extra Large
2x Large
3x Large
4x Large
5x Large

Custom Icons

The <SvgIcon> component can be used for other custom icons. It allows you to pass in the SVG child elements. This component is recommended if you want built-in accessibility features and standard icon styles.

In the example below, the <SvgIcon> component is used with a custom path.

Code snippet

<svg
  aria-hidden="true"
  class="ds-c-icon"
  focusable="false"
  id="icon-1064"
  viewBox="0 0 496 512"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z"
  ></path>
</svg>

Accessibility

The <SvgIcon> component has built-in accessibility features including:

a built-in title attribute. For any specific exported icon, the title attribute is defaulted, but can be overwritten.
focusable="false" which prevents the icon from being focusable
role="img" which tells assistive technologies that the icon's purpose is as an image
optional description attribute which can be used for a more detailed explanation of the icon's contents. Meant to be used to provide more detail than just the title
an availableariaHidden attribute which can be used if the icon's context is described elsewhere. For example, if the icon is part of a button with text, the text may provide the text description instead of the icon component.

Customization

The following Sass variables can be overridden to customize Icon components:

Variable	Default Core Theme Value
`$icon__color__error`	`$color-error`
`$icon__color--inverse`	`$color-white`
`$icon__color--primary`	`$color-primary`
`$icon__color--success`	`$color-green`
`$icon__color--warn`	`$color-gold`