Icon
Icon is a wrapper for svg assets to control their appearance.

To learn more about what problems we're solving with this utility, check our blog post about iconography.

Usage

In order to support tree-shaking and let you use any icon set - Icon has an svg property to pass a React component to it. Therefore, you can use it with any iconset available across the web as long as it returns icons as React components, or your bundle transforms svg imports into react nodes.

Colors

In most of the situations you would like to just use the Icon without defining its color manually. It will inherit the text color from its parent elements which makes it quite dynamic.

Color for the svg should be defined on the svg level by using currentColor value for its fill or stroke css properties. Example of an SVG component:

There are also cases when you don't want to introduce an additional wrapper just to set the color and in those situations you can pass color property directly to the icon. That will let you chose one of the foreground colors provided by the design tokens.

Sizes

Icon supports multiple sizes: smaller, small (default), medium, large, larger and largest. These sizes cover use cases from icons for tiny interface elements to icons representing page level states.

Bounding box

By default, we're providing a squared bounding box for all icons. That way whenever you render multiple icons in a list, your content will stay visually aligned. Sometimes that's not the case though, and you would like to avoid that extra horizontal space on either side of the icon. For instance, we use that for Button or Link components in Arcade itself. To remove this extra space, you can use the autoWidth property that will keep only the vertical bounding box.

Svg slot

If passing just one component doesn't work for you - it's possible to use svg property as a slot.

Accessibility

Icons are used for decoration and are not focusable or clickable. If you need to perform an action on click, focus, etc. - make sure you're wrapping it with a component or html element that renders <a> or <button> tag. Most of the time you would want to use it with Button component.

Properties

NameTypeDefaultRequiredComment
svgReactNode-trueIcon svg asset
sizesmaller, small, medium, large, larger, largestsmallfalse
colorneutral-faded, primary, positive, critical-false
autoWidthboolean-falseMake icon boundaries not squared?
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element