Icon
Icons are used to visually communicate core parts of the product and available actions.
This component should not be used on its own. Icons should always appear in a context where their meaning is clear or explained by a label.
If you're looking for an interactive icon refer to the IconButton.
The weight prop is removed with 8.0.0 version of Atlas.
You can use the name prop for using Bold or Filled version of the Icon instead of weight prop. For the implementation example please check the Bold Icon example
Please refer to the Available Icons section to check if Bold or Filled versions of your Icon are exists.
Available icons
Duotone Icons don't support small and medium size.
Example
<Icon name="Check" />
Usage Rules
Do:
- Use if the icon's meaning is clearly understood based on the context
Don’t:
- Use icons that may have various, differing meanings
- Use an icon if text can be a more effective mode of communication
- Use if icon should be interactive
Variants
Bold
You can use the name prop to provide a Bold or Filled version of the Icon.
Please refer to the Available Icons section to check if Bold or Filled versions of your Icon are exists.
function MyIcon() { const isBold = true; return ( <> <Icon name="CheckBold" /> <Icon name={isBold ? 'CheckBold' : 'Check'} /> </> ); }
Color
A color can be set to adjust the appearance of an icon based on the background it's displayed on. Any design-token color is available.
You can also use any color code in hex, rgb, rgba, or hsl formats.
<> <Icon name="Check" color={ColorPositive80} /> <Icon name="Check" color="#ff8000" /> <Icon name="Check" color="rgb(255, 128, 0)" /> <Icon name="Check" color="rgba(255, 128, 0, .6)" /> <Icon name="Check" color="hsl(30, 100%, 50%)" /> </>
Name
The kind of icon can be set via the name prop. You can find a list of all available icons and their names below.
<Icon name="Check" />
Size
The Icon component is available in three sizes: small, medium and large.
<> Small <Icon name="Check" size="small" /> Medium <Icon name="Check" size="medium" /> Large <Icon name="Check" size="large" /> </>
Props
| Name | Type | Default |
|---|---|---|
name * Please refer to the list defined above: Link | "AddValue" | "Adjust" | "AIAgent" | "AppGrid" | "ArrowCircleLeft" | "ArrowCircleRight" | "ArrowDown"... | — |
size Small icons have a less detailed svg paths than medium and large icons. |
| "medium" |
color Any design token color (e.g. ColorNeutral80) |
| — |
aria-label Provide at least one label(visual or non-visual) property for better accessibility. Check Accessibility page for more info: Link |
| — |
css Add custom styles to this component. Use with caution. Learn more here: Link |
| — |
inputFieldCss |
| — |
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence |
| — |
| * - the prop is required. |