Icon
Display an icon using system colors and sizing.
React
Pass an icon from the @hoverinc/icons
package to the icon prop.
import { Icon } from '@hoverinc/design-system-react-web';<Icon icon={iconSettings} />Size
Icons are available in a handful of sizes which include a standard margin
around the icon by default.
The default size is small.
<Box flexDirection="column">
<Icon icon={iconBattery} size="tiny" />
<Icon icon={iconBattery} size="small" />
<Icon icon={iconBattery} size="medium" />
<Icon icon={iconBattery} size="large" />
<Icon icon={iconBattery} size="huge" />
</Box>Color
Pass any system color to the color prop to control the color of the icon.
<Box flexDirection="column">
<Icon icon={iconLightBulb} color="danger.base" />
<Icon icon={iconHeartOutlined} color="warning.base" />
<Icon icon={iconHeartFilled} color="success.base" />
</Box>