A standardised way to render icons, ensuring that only the icons you use are included in your output

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' }} />
)

API Reference

PropTypeDefaultRequired
size
"sm" | "md" | "lg"
md

-

cssCSSProperties

-

-

isFC<SVGProps<SVGSVGElement>>

-

asJSX.IntrinsicElements

-

-