Icon

Icon is a light wrapper component that provides a standardised set of styles to the icon in use. It requires an SVG from our icon library to be passed into the is prop.

<Stack gap="4">
  <Icon is={BatteryMedium} />
  <Icon is={Crossing} />
  <Icon is={EyeCrossed} />
  <Icon is={Paperclip} />
  <Icon is={Sun} />
  <Icon is={Wheelchair} />
</Stack>

Ensure that you pair the imported icon (in this case Brightness) with the Icon component to render in a consistent and reliable way. Review the available icons on the icon listing page

import { Icon } from '@atom-learning/components'
import { Brightness } from '@atom-learning/icons'

const Component = () => (
  <Icon is={Brightness} size="md" css={{ color: '$primary' }} />
)