Icon

View Chakra UI documentation
<Stack spacing="8">

// General icons (imported from Material Design Icons)
// import { mdiInformationOutline, mdiPencilOutline, mdiTrashCanOutline } from '@mdi/js'

    <Wrap>
        <Icon><path d={mdiInformationOutline} /></Icon>
        <Icon><path d={mdiPencilOutline} /></Icon>
        <Icon><path d={mdiTrashCanOutline} /></Icon>
    </Wrap>
    <Wrap>
        <Icon color="neutral"><path d={mdiInformationOutline} /></Icon>
        <Icon color="gray"><path d={mdiInformationOutline} /></Icon>
        <Icon color="red"><path d={mdiInformationOutline} /></Icon>
        <Icon color="orange"><path d={mdiInformationOutline} /></Icon>
        <Icon color="yellow"><path d={mdiInformationOutline} /></Icon>
        <Icon color="green"><path d={mdiInformationOutline} /></Icon>
        <Icon color="teal"><path d={mdiInformationOutline} /></Icon>
        <Icon color="cyan"><path d={mdiInformationOutline} /></Icon>
        <Icon color="blue"><path d={mdiInformationOutline} /></Icon>
        <Icon color="purple"><path d={mdiInformationOutline} /></Icon>
        <Icon color="pink"><path d={mdiInformationOutline} /></Icon>
    </Wrap>
    <Wrap>
        <Icon layerStyle="icon.subtle" boxSize="icon.lg" color="neutral"><path d={mdiInformationOutline} /></Icon>
        <Icon layerStyle="icon.subtle" boxSize="icon.lg" color="gray"><path d={mdiInformationOutline} /></Icon>
        <Icon layerStyle="icon.subtle" boxSize="icon.lg" color="red"><path d={mdiInformationOutline} /></Icon>
        <Icon layerStyle="icon.subtle" boxSize="icon.lg" color="orange"><path d={mdiInformationOutline} /></Icon>
        <Icon layerStyle="icon.subtle" boxSize="icon.lg" color="yellow"><path d={mdiInformationOutline} /></Icon>
        <Icon layerStyle="icon.subtle" boxSize="icon.lg" color="green"><path d={mdiInformationOutline} /></Icon>
        <Icon layerStyle="icon.subtle" boxSize="icon.lg" color="teal"><path d={mdiInformationOutline} /></Icon>
        <Icon layerStyle="icon.subtle" boxSize="icon.lg" color="cyan"><path d={mdiInformationOutline} /></Icon>
        <Icon layerStyle="icon.subtle" boxSize="icon.lg" color="blue"><path d={mdiInformationOutline} /></Icon>
        <Icon layerStyle="icon.subtle" boxSize="icon.lg" color="purple"><path d={mdiInformationOutline} /></Icon>
        <Icon layerStyle="icon.subtle" boxSize="icon.lg" color="pink"><path d={mdiInformationOutline} /></Icon>
    </Wrap>
    <Wrap>
        <Icon layerStyle="icon.solid" boxSize="icon.lg" color="neutral"><path d={mdiInformationOutline} /></Icon>
        <Icon layerStyle="icon.solid" boxSize="icon.lg" color="gray"><path d={mdiInformationOutline} /></Icon>
        <Icon layerStyle="icon.solid" boxSize="icon.lg" color="red"><path d={mdiInformationOutline} /></Icon>
        <Icon layerStyle="icon.solid" boxSize="icon.lg" color="orange"><path d={mdiInformationOutline} /></Icon>
        <Icon layerStyle="icon.solid" boxSize="icon.lg" color="yellow"><path d={mdiInformationOutline} /></Icon>
        <Icon layerStyle="icon.solid" boxSize="icon.lg" color="green"><path d={mdiInformationOutline} /></Icon>
        <Icon layerStyle="icon.solid" boxSize="icon.lg" color="teal"><path d={mdiInformationOutline} /></Icon>
        <Icon layerStyle="icon.solid" boxSize="icon.lg" color="cyan"><path d={mdiInformationOutline} /></Icon>
        <Icon layerStyle="icon.solid" boxSize="icon.lg" color="blue"><path d={mdiInformationOutline} /></Icon>
        <Icon layerStyle="icon.solid" boxSize="icon.lg" color="purple"><path d={mdiInformationOutline} /></Icon>
        <Icon layerStyle="icon.solid" boxSize="icon.lg" color="pink"><path d={mdiInformationOutline} /></Icon>
    </Wrap>
    <Wrap>
        <Icon layerStyle="icon.solid" boxSize="icon.3xs" color="primary"><path d={mdiInformationOutline} /></Icon>
        <Icon layerStyle="icon.solid" boxSize="icon.2xs" color="primary"><path d={mdiInformationOutline} /></Icon>
        <Icon layerStyle="icon.solid" boxSize="icon.xs" color="primary"><path d={mdiInformationOutline} /></Icon>
        <Icon layerStyle="icon.solid" boxSize="icon.sm" color="primary"><path d={mdiInformationOutline} /></Icon>
        <Icon layerStyle="icon.solid" boxSize="icon.md" color="primary"><path d={mdiInformationOutline} /></Icon>
        <Icon layerStyle="icon.solid" boxSize="icon.lg" color="primary"><path d={mdiInformationOutline} /></Icon>
        <Icon layerStyle="icon.solid" boxSize="icon.xl" color="primary"><path d={mdiInformationOutline} /></Icon>
        <Icon layerStyle="icon.solid" boxSize="icon.2xl" color="primary"><path d={mdiInformationOutline} /></Icon>
        <Icon layerStyle="icon.solid" boxSize="icon.3xl" color="primary"><path d={mdiInformationOutline} /></Icon>
        <Icon layerStyle="icon.solid" boxSize="icon.4xl" color="primary"><path d={mdiInformationOutline} /></Icon>
        <Icon layerStyle="icon.solid" boxSize="icon.5xl" color="primary"><path d={mdiInformationOutline} /></Icon>
        <Icon layerStyle="icon.solid" boxSize="icon.6xl" color="primary"><path d={mdiInformationOutline} /></Icon>
        <Icon layerStyle="icon.solid" boxSize="icon.7xl" color="primary"><path d={mdiInformationOutline} /></Icon>
        <Icon layerStyle="icon.solid" boxSize="icon.8xl" color="primary"><path d={mdiInformationOutline} /></Icon>
    </Wrap>

// Sitecore logos (imported from Blok)
// import { iconXmCloud, iconContentHubOne, iconPersonalize, iconOrdercloud } from '@sitecore/blok-theme'

    <Wrap>
        <Icon layerStyle='icon.subtle' boxSize='icon.lg' color='neutral'><path d={iconXmCloud}/></Icon>
        <Icon layerStyle='icon.subtle' boxSize='icon.lg' color='purple'><path d={iconContentHubOne}/></Icon>
        <Icon layerStyle='icon.subtle' boxSize='icon.lg' color='red'><path d={iconPersonalize}/></Icon>
        <Icon layerStyle='icon.subtle' boxSize='icon.lg' color='teal'><path d={iconOrdercloud}/></Icon>
    </Wrap>

// Brand logos (imported from Simple Icons)
// import { SiAzuredevops, SiGithub } from 'react-icons/si'

    <Wrap>
        <Icon as={SiAzuredevops} boxSize="10" color="#0078D7" _dark={{ color: 'chakra-body-text' }} />
        <Icon as={SiGithub} boxSize="10" color="#181717" _dark={{ color: 'chakra-body-text' }} />
    </Wrap>

</Stack>