Icon

Icons are visual representations of commands, devices, directories, and common actions.

Component checklist

React

Is new design vision part implemented using new tokens?

Up to date

Resources

Example

Storybook failed to load. Please connect to the VPN to access.

                                                        
                                                        
                                                            import { Icon } from '@optimus-web/core';
                                                        import { IconName } from '@optimus-web/icons';
                                                        
                                                        <Icon variant="basic" value={IconName.Food} />
                                                        
                                                            

API

Name

Description

Type

Default

value

The icon name rendered

IconName

-

alt?

arial-label for the icon element

string

undefined

className?

CSS class for the icon wrapper

string

undefined

variant?

Defines the variant used for the icon

IconVariant

undefined

forwardedRef?

Adds your React.Ref to the icon

React.Ref<HTMLButtonElement>

undefined

size?

Defines the size for the icon

small | medium | large

medium