Icon

An icon is a symbol representing a command, device, directory, or common action.

#Sizes

Use a size that matches the text or control beside it.

import { Icon } from '@wolf-rayet/react';

<Icon size="small">{Check}</Icon>
<Icon size="medium">{Check}</Icon>
<Icon size="large">{Check}</Icon>

#Colour

An icon takes the colour of the text around it.

import { Icon } from '@wolf-rayet/react';

<span style={{ color: '#1868db' }}><Icon>{Check}</Icon></span>
<span style={{ color: '#c9372c' }}><Icon>{Check}</Icon></span>
<span style={{ color: '#1f845a' }}><Icon>{Check}</Icon></span>

#Standalone

Give an icon a label when it is not beside text that explains it.

import { Icon } from '@wolf-rayet/react';

<Icon label="Done">{Check}</Icon>