Icon
View Chakra UI documentation
Looking for the right icon to use? See Icons
<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>