Icon

Icon is a wrapper for svg assets to control their appearance.
Supports inheriting size from the font-size of the parent element
Supports inheriting color the parent element


Usage

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

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

By default, Icon uses the font-size of its parent element to define its width and height. However, you can define any size for the icon by passing a unit token multiplier. For example, in the default theme passing size={3} will resolve to 12px.

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.

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
sizenumber-false
colorneutral-faded, primary, positive, critical-false
autoWidthboolean-falseMake icon boundaries not squared?
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element