Icon

Chakra provides multiple ways to use icons in your project:

Using Chakra UI icon library
Using a third-party icon library
Creating your own icons

🚨 Avoid passing onClick handlers to icon components. If you need a clickable icon, use the IconButton instead.

Using Chakra UI icons#

Chakra provides a set of commonly used interface icons you can use in your project. To use these icons, install @chakra-ui/icons, import the icons you need and style them.

Installation#

npm i @chakra-ui/icons
# or
yarn add @chakra-ui/icons

Usage#

import { PhoneIcon, AddIcon, WarningIcon } from '@chakra-ui/icons'
// The default icon size is 1em (16px)
<PhoneIcon />
// Use the `boxSize` prop to change the icon size
<AddIcon w={6} h={6} />
// Use the `color` prop to change the icon color
<WarningIcon w={8} h={8} color="red.500" />

All icons#

Below is a list of all of the icons in the library, along with the corresponding component names:

Using a third-party icon library#

To use third-party icon libraries like react-icons, here are the steps:

Import the Icon component from @chakra-ui/react
Pass the desired third party icon into the as prop

// 1. Import
import { Icon } from "@chakra-ui/react"
import { MdSettings } from "react-icons/md"
// 2. Use the `as` prop
function Example() {
  return <Icon as={MdSettings} />
}

Some examples#

<HStack>
  {/* The default icon size is 1em (16px) */}
  <Icon as={MdSettings} />
  {/* Use the `boxSize` prop to change the icon size */}
  <Icon as={MdReceipt} w={6} h={6} />
  {/* Use the `color` prop to change the icon color */}
  <Icon as={MdGroupWork} w={8} h={8} color="red.500" />
</HStack>

<HStack>
  {/* The default icon size is 1em (16px) */}
  <Icon as={MdSettings} />
  {/* Use the `boxSize` prop to change the icon size */}
  <Icon as={MdReceipt} w={6} h={6} />
  {/* Use the `color` prop to change the icon color */}
  <Icon as={MdGroupWork} w={8} h={8} color="red.500" />
</HStack>

Creating your custom icons#

Chakra provides two methods for creating your custom icons:

Using the Icon component
Using the createIcon function

They can be imported from @chakra-ui/react:

import { Icon, createIcon } from "@chakra-ui/react"

import { Icon, createIcon } from "@chakra-ui/react"

Both Icon and createIcon enable you to style the icon using style props.

Using the `Icon` component#

The Icon component renders as an svg element.

<Icon viewBox="0 0 200 200" color="red.500">
  <path
    fill="currentColor"
    d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"
  />
</Icon>

<Icon viewBox="0 0 200 200" color="red.500">
  <path
    fill="currentColor"
    d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"
  />
</Icon>

This enables you to define your own custom icon components:

const CircleIcon = (props) => (
  <Icon viewBox="0 0 200 200" {...props}>
    <path
      fill="currentColor"
      d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"
    />
  </Icon>
)

And style them with style props:

<HStack>
  {/* The default icon size is 1em (16px) */}
  <CircleIcon />
  {/* Use the `boxSize` prop to change the icon size */}
  <CircleIcon boxSize={6} />
  {/* Use the `color` prop to change the icon color */}
  <CircleIcon boxSize={8} color="red.500" />
</HStack>

<HStack>
  {/* The default icon size is 1em (16px) */}
  <CircleIcon />
  {/* Use the `boxSize` prop to change the icon size */}
  <CircleIcon boxSize={6} />
  {/* Use the `color` prop to change the icon color */}
  <CircleIcon boxSize={8} color="red.500" />
</HStack>

Using the `createIcon` function#

The createIcon function is a convenience wrapper around the process of generating icons with Icon, allowing you to achieve the same functionality with less effort.

import { createIcon } from "@chakra-ui/icons"
// using `path`
export const UpDownIcon = createIcon({
  displayName: "UpDownIcon",
  viewBox: "0 0 200 200",
  // path can also be an array of elements, if you have multiple paths, lines, shapes, etc.
  path: (
    <path
      fill="currentColor"
      d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"
    />
  ),
})
// OR using the `d` value of a path (the path definition) directly
export const UpDownIcon = createIcon({
  displayName: "UpDownIcon",
  viewBox: "0 0 200 200",
  d: "M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0",
})

Tips for generating your own icons#

Export icons as svg from Figma, Sketch, etc.
Use a tool like SvgOmg to reduce the size and minify the markup.
Custom Icons#
Here are the icons we used besides Chakra's and React-Icons' icons and logos.

<DarkMode>
  <SimpleGrid columns={[1, null, 4]} spacing="12px">
    <Flex
      p="20px"
      alignItems="center"
      justifyContent="center"
      flexDirection="column"
      border="2px solid"
      borderRadius="15px"
      borderColor="whiteAlpha.300"
    >
      <Icon viewBox="0 0 24 24" h="36px" w="36px" color="teal.300" mb="20px">
        <path
          fill="currentColor"
          d="M7.984 19.937a1.406 1.406 0 100-2.812 1.406 1.406 0 000 2.812zM17.828 19.937a1.406 1.406 0 100-2.812 1.406 1.406 0 000 2.812zM20.324 5.558a1.051 1.051 0 00-.815-.386H6.134l-.27-1.528a.703.703 0 00-.692-.581H2.359a.703.703 0 000 1.406h2.223L6.59 15.841a.703.703 0 00.692.581h11.25a.703.703 0 100-1.406H7.871l-.248-1.406h10.62a1.057 1.057 0 001.035-.848l1.266-6.328a1.055 1.055 0 00-.22-.876z"
        />
      </Icon>
      <Text>CartIcon</Text>
    </Flex>
    <Flex
      p="20px"
      alignItems="center"
      justifyContent="center"
      flexDirection="column"
      border="2px solid"
      borderRadius="15px"
      borderColor="whiteAlpha.300"
    >
      <Icon viewBox="0 0 24 24" h="36px" w="36px" color="teal.300" mb="20px">
        <g>
          <g>
            <rect fill="none" height="24" width="24" />
          </g>
          <g>
            <g>
              <g>
                <path
                  fill="currentColor"
                  d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M16.2,16.2L11,13V7h1.5v5.2l4.5,2.7L16.2,16.2z"
                />
              </g>
            </g>
          </g>
        </g>
      </Icon>
      <Text>ClockIcon</Text>
    </Flex>
    <Flex
      p="20px"
      alignItems="center"
      justifyContent="center"
      flexDirection="column"
      border="2px solid"
      borderRadius="15px"
      borderColor="whiteAlpha.300"
    >
      <Icon viewBox="0 0 24 24" h="36px" w="36px" color="teal.300" mb="20px">
        <path
          fill="currentColor"
          d="M1.406 17.023a2.461 2.461 0 002.461 2.46h14.766a2.461 2.461 0 002.46-2.46v-6.768H1.407v6.768zm2.9-3.34a1.318 1.318 0 011.319-1.318h2.11a1.318 1.318 0 011.318 1.318v.879a1.318 1.318 0 01-1.319 1.318H5.625a1.318 1.318 0 01-1.318-1.318v-.879zM18.633 4.014H3.867a2.46 2.46 0 00-2.46 2.461v1.143h19.687V6.475a2.46 2.46 0 00-2.461-2.46z"
        />
      </Icon>
      <Text>CreditIcon</Text>
    </Flex>
    <Flex
      p="20px"
      alignItems="center"
      justifyContent="center"
      flexDirection="column"
      border="2px solid"
      borderRadius="15px"
      borderColor="whiteAlpha.300"
    >
      <Icon viewBox="0 0 24 24" h="36px" w="36px" color="teal.300" mb="20px">
        <g>
          <path
            fill="currentColor"
            d="M18.809 10.344h-6.153a2.11 2.11 0 01-2.11-2.11V2.083a.176.176 0 00-.175-.176H6.328A2.812 2.812 0 003.516 4.72v14.063a2.812 2.812 0 002.812 2.812h9.844a2.812 2.812 0 002.812-2.813V10.52a.176.176 0 00-.175-.176z"
          />
          <path
            fill="currentColor"
            d="M18.423 8.789l-6.32-6.32a.088.088 0 00-.15.062v5.705a.703.703 0 00.703.703h5.705a.088.088 0 00.062-.15z"
          />
        </g>
      </Icon>
      <Text>DocumentIcon</Text>
    </Flex>
    <Flex
      p="20px"
      alignItems="center"
      justifyContent="center"
      flexDirection="column"
      border="2px solid"
      borderRadius="15px"
      borderColor="whiteAlpha.300"
    >
      <Icon viewBox="0 0 24 24" h="36px" w="36px" color="teal.300" mb="20px">
        <g>
          <path
            stroke="currentColor"
            fill="transparent"
            d="M11.25 2.109a9.14 9.14 0 100 18.281 9.14 9.14 0 000-18.281z"
            stroke-width=".75"
            stroke-miterlimit="10"
          />
          <path
            stroke="currentColor"
            fill="transparent"
            d="M11.25 2.109C8.698 2.109 6.3 6.2 6.3 11.249c0 5.048 2.4 9.14 4.951 9.14 2.552 0 4.951-4.092 4.951-9.14 0-5.048-2.399-9.14-4.95-9.14z"
            stroke-width=".75"
            stroke-miterlimit="10"
          />
          <path
            stroke="currentColor"
            fill="transparent"
            d="M5.156 5.156C6.836 6.349 8.952 7.06 11.25 7.06c2.298 0 4.414-.711 6.094-1.904"
          />
          <path
            stroke="currentColor"
            fill="transparent"
            d="M5.156 5.156C6.836 6.349 8.952 7.06 11.25 7.06c2.298 0 4.414-.711 6.094-1.904M17.344 17.344c-1.68-1.193-3.796-1.904-6.094-1.904-2.298 0-4.413.711-6.094 1.904"
            stroke-width=".75"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            stroke="currentColor"
            fill="transparent"
            d="M11.25 2.109v18.28M20.39 11.249H2.11"
            stroke-width=".75"
            stroke-miterlimit="10"
          />
        </g>
      </Icon>
      <Text>GlobeIcon</Text>
    </Flex>
    <Flex
      p="20px"
      alignItems="center"
      justifyContent="center"
      flexDirection="column"
      border="2px solid"
      borderRadius="15px"
      borderColor="whiteAlpha.300"
    >
      <Icon viewBox="0 0 24 24" h="36px" w="36px" color="teal.300" mb="20px">
        <path
          fill="currentColor"
          d="M11.25 0C5.04 0 0 5.04 0 11.25S5.04 22.5 11.25 22.5 22.5 17.46 22.5 11.25 17.46 0 11.25 0zm-.352 17.813a1.172 1.172 0 110-2.344 1.172 1.172 0 010 2.344zm1.96-5.977c-.95.637-1.08 1.222-1.08 1.758a.82.82 0 11-1.641 0c0-1.284.59-2.305 1.806-3.121 1.13-.758 1.768-1.239 1.768-2.295 0-.718-.41-1.264-1.26-1.668-.199-.095-.644-.187-1.191-.18-.687.008-1.22.172-1.63.503-.775.623-.84 1.302-.84 1.312a.821.821 0 11-1.642-.08c.007-.142.106-1.425 1.452-2.507.698-.562 1.585-.854 2.636-.866.745-.01 1.444.117 1.918.34 1.418.672 2.198 1.79 2.198 3.146 0 1.982-1.325 2.872-2.494 3.658z"
        />
      </Icon>
      <Text>HelpIcon</Text>
    </Flex>
    <Flex
      p="20px"
      alignItems="center"
      justifyContent="center"
      flexDirection="column"
      border="2px solid"
      borderRadius="15px"
      borderColor="whiteAlpha.300"
    >
      <Icon viewBox="0 0 24 24" h="36px" w="36px" color="teal.300" mb="20px">
        <g>
          <path
            fill="currentColor"
            d="M11.494 4.951a.351.351 0 00-.486 0l-8.09 7.729a.352.352 0 00-.109.254v7.254a1.406 1.406 0 001.405 1.406h4.223a.703.703 0 00.704-.703v-5.976a.351.351 0 01.351-.352h3.516a.351.351 0 01.351.352v5.976a.703.703 0 00.704.703h4.22a1.407 1.407 0 001.407-1.406v-7.254a.35.35 0 00-.108-.254L11.494 4.95z"
          />
          <path
            fill="currentColor"
            d="M21.574 11.23l-3.287-3.144V3.314a.703.703 0 00-.703-.703h-2.11a.703.703 0 00-.703.703V4.72l-2.545-2.434c-.239-.24-.593-.378-.976-.378-.38 0-.734.138-.972.379L.93 11.23a.717.717 0 00-.058.983.703.703 0 001.018.046l9.119-8.713a.352.352 0 01.486 0l9.12 8.713a.703.703 0 00.992-.019c.27-.28.248-.74-.033-1.01z"
          />
        </g>
      </Icon>
      <Text>HomeIcon</Text>
    </Flex>
    <Flex
      p="20px"
      alignItems="center"
      justifyContent="center"
      flexDirection="column"
      border="2px solid"
      borderRadius="15px"
      borderColor="whiteAlpha.300"
    >
      <Icon viewBox="0 0 24 24" h="36px" w="36px" color="teal.300" mb="20px">
        <g>
          <path
            fill="currentColor"
            d="M16.179 2.532C15.142 1.357 13.265.854 10.863.854H3.895a.997.997 0 00-.986.834L.007 19.945a.595.595 0 00.591.686H4.9l1.08-6.8-.033.215a.993.993 0 01.983-.834h2.044c4.017 0 7.16-1.619 8.08-6.3.027-.14.07-.406.07-.406.262-1.732-.001-2.907-.945-3.974z"
          />
          <path
            fill="currentColor"
            d="M18.213 7.393c-.998 4.61-4.184 7.048-9.24 7.048H7.142L5.773 23.1h2.973a.87.87 0 00.862-.731l.035-.184.684-4.297.044-.237a.87.87 0 01.86-.731h.544c3.514 0 6.264-1.416 7.068-5.51.322-1.644.166-3.021-.63-4.017z"
          />
        </g>
      </Icon>
      <Text>PayPalIcon</Text>
    </Flex>
    <Flex
      p="20px"
      alignItems="center"
      justifyContent="center"
      flexDirection="column"
      border="2px solid"
      borderRadius="15px"
      borderColor="whiteAlpha.300"
    >
      <Icon viewBox="0 0 24 24" h="36px" w="36px" color="teal.300" mb="20px">
        <path
          fill="currentColor"
          d="M14.618 3.338c-.855-.924-2.05-1.432-3.368-1.432-1.325 0-2.524.505-3.375 1.423-.86.928-1.28 2.188-1.181 3.55.195 2.686 2.239 4.87 4.556 4.87s4.358-2.184 4.556-4.87c.1-1.349-.322-2.607-1.188-3.541zM18.984 21.592H3.515a1.363 1.363 0 01-1.063-.489 1.552 1.552 0 01-.316-1.279c.371-2.058 1.529-3.786 3.348-5 1.616-1.076 3.664-1.67 5.766-1.67s4.15.594 5.765 1.67c1.82 1.214 2.977 2.942 3.348 5 .085.471-.03.937-.315 1.279a1.362 1.362 0 01-1.064.49z"
        />
      </Icon>
      <Text>PersonIcon</Text>
    </Flex>
    <Flex
      p="20px"
      alignItems="center"
      justifyContent="center"
      flexDirection="column"
      border="2px solid"
      borderRadius="15px"
      borderColor="whiteAlpha.300"
    >
      <Icon viewBox="0 0 24 24" h="36px" w="36px" color="teal.300" mb="20px">
        <g>
          <path d="M0 0h24v24H0V0z" fill="transparent" />
          <path
            fill="currentColor"
            d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v1c0 .55.45 1 1 1h14c.55 0 1-.45 1-1v-1c0-2.66-5.33-4-8-4z"
          />
        </g>
      </Icon>
      <Text>ProfileIcon</Text>
    </Flex>
    <Flex
      p="20px"
      alignItems="center"
      justifyContent="center"
      flexDirection="column"
      border="2px solid"
      borderRadius="15px"
      borderColor="whiteAlpha.300"
    >
      <Icon viewBox="0 0 24 24" h="36px" w="36px" color="teal.300" mb="20px">
        <g>
          <path
            fill="currentColor"
            d="M20.99 2.182a.209.209 0 00-.156-.16c-2.574-.63-8.521 1.613-11.743 4.833a13.93 13.93 0 00-1.566 1.85c-.994-.087-1.987-.014-2.834.355-2.39 1.052-3.085 3.796-3.279 4.976a.424.424 0 00.464.492l3.837-.423c.002.29.02.578.052.866.02.2.108.386.25.527l1.486 1.482a.86.86 0 00.528.25c.286.033.573.05.86.053l-.42 3.832a.424.424 0 00.492.464c1.178-.19 3.927-.885 4.972-3.274.37-.847.445-1.836.36-2.824a13.96 13.96 0 001.855-1.567c3.232-3.216 5.462-9.03 4.842-11.732zm-8.067 7.896a2.11 2.11 0 112.983-2.984 2.11 2.11 0 01-2.983 2.984z"
          />
          <path
            fill="currentColor"
            d="M7.4 18.054c-.24.241-.627.335-1.092.416-1.044.178-1.967-.725-1.779-1.78.072-.401.283-.962.415-1.094a.192.192 0 00-.16-.328 2.636 2.636 0 00-1.544.753c-1.033 1.034-1.13 4.87-1.13 4.87s3.838-.097 4.872-1.13c.417-.417.682-.961.752-1.546.017-.184-.207-.293-.334-.16z"
          />
        </g>
      </Icon>
      <Text>RocketIcon</Text>
    </Flex>
    <Flex
      p="20px"
      alignItems="center"
      justifyContent="center"
      flexDirection="column"
      border="2px solid"
      borderRadius="15px"
      borderColor="whiteAlpha.300"
    >
      <Icon viewBox="0 0 24 24" h="36px" w="36px" color="teal.300" mb="20px">
        <g>
          <path d="M0,0h24v24H0V0z" fill="none" />
          <path
            fill="currentColor"
            d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"
          />
        </g>
      </Icon>
      <Text>SettingsIcon</Text>
    </Flex>
    <Flex
      p="20px"
      alignItems="center"
      justifyContent="center"
      flexDirection="column"
      border="2px solid"
      borderRadius="15px"
      borderColor="whiteAlpha.300"
    >
      <Icon viewBox="0 0 24 24" h="36px" w="36px" color="teal.300" mb="20px">
        <path
          fill="currentColor"
          d="M20.885 5.547a.703.703 0 00-1.122-.176l-2.7 2.702a.708.708 0 01-.995 0l-1.167-1.169a.702.702 0 010-.994l2.689-2.69a.704.704 0 00-.21-1.138c-2.031-.908-4.566-.435-6.164 1.152-1.358 1.348-1.763 3.455-1.11 5.78a.698.698 0 01-.197.703L2.593 16.4a2.82 2.82 0 103.981 3.983l6.754-7.332a.699.699 0 01.693-.2 7.885 7.885 0 002.03.279c1.469 0 2.757-.475 3.686-1.39 1.72-1.695 1.983-4.57 1.148-6.192zM4.623 19.901a1.407 1.407 0 11-.305-2.797 1.407 1.407 0 01.305 2.797z"
        />
      </Icon>
      <Text>SupportIcon</Text>
    </Flex>
    <Flex
      p="20px"
      alignItems="center"
      justifyContent="center"
      flexDirection="column"
      border="2px solid"
      borderRadius="15px"
      borderColor="whiteAlpha.300"
    >
      <Icon viewBox="0 0 24 24" h="36px" w="36px" color="teal.300" mb="20px">
        <path
          fill="currentColor"
          d="M4.57 22.297H3.164a1.055 1.055 0 01-1.055-1.054v-6.328a1.055 1.055 0 011.055-1.055H4.57a1.055 1.055 0 011.055 1.055v6.328a1.055 1.055 0 01-1.055 1.054zM14.414 22.296h-1.406a1.055 1.055 0 01-1.055-1.055V10.695a1.055 1.055 0 011.055-1.055h1.406a1.055 1.055 0 011.055 1.055V21.24a1.055 1.055 0 01-1.055 1.055zM19.336 22.297H17.93a1.055 1.055 0 01-1.055-1.055V5.773A1.055 1.055 0 0117.93 4.72h1.406a1.055 1.055 0 011.055 1.054v15.47a1.055 1.055 0 01-1.055 1.054zM9.492 22.297H8.086a1.055 1.055 0 01-1.055-1.055V2.257a1.055 1.055 0 011.055-1.054h1.406a1.055 1.055 0 011.055 1.054v18.985a1.055 1.055 0 01-1.055 1.055z"
        />
      </Icon>
      <Text>StatsIcon</Text>
    </Flex>
    <Flex
      p="20px"
      alignItems="center"
      justifyContent="center"
      flexDirection="column"
      border="2px solid"
      borderRadius="15px"
      borderColor="whiteAlpha.300"
    >
      <Icon viewBox="0 0 24 24" h="36px" w="36px" color="teal.300" mb="20px">
        <g>
          <path
            fill="currentColor"
            d="M4.447 4.818h14.062c.164 0 .328.01.491.031a2.9 2.9 0 00-3.406-2.441L4.03 4.382h-.013a2.9 2.9 0 00-1.805 1.149 3.848 3.848 0 012.236-.713zM18.51 5.875H4.446a2.816 2.816 0 00-2.813 2.812v8.438a2.816 2.816 0 002.813 2.812h14.062a2.815 2.815 0 002.813-2.812V8.687a2.815 2.815 0 00-2.813-2.812zm-2.088 8.437a1.406 1.406 0 110-2.811 1.406 1.406 0 010 2.811z"
          />
          <path
            fill="currentColor"
            d="M1.656 11.651V7.28c0-.952.528-2.549 2.358-2.895 1.553-.291 3.091-.291 3.091-.291s1.011.703.176.703-.813 1.077 0 1.077 0 1.032 0 1.032L4.007 10.62l-2.35 1.032z"
          />
        </g>
      </Icon>
      <Text>WalletIcon</Text>
    </Flex>
    <Flex
      p="20px"
      alignItems="center"
      justifyContent="center"
      flexDirection="column"
      border="2px solid"
      borderRadius="15px"
      borderColor="whiteAlpha.300"
    >
      <Icon viewBox="0 0 24 24" h="36px" w="36px" color="teal.300" mb="20px">
        <g clip-path="url(#clip0)">
          <path
            d="M4.042 0h12.916A3.539 3.539 0 0120.5 3.542v12.416a3.539 3.539 0 01-3.542 3.542H4.042A3.539 3.539 0 01.5 15.958V3.542A3.539 3.539 0 014.042 0z"
            fill="#470137"
          />
          <path
            d="M11.017 5.124l-2.5 4.125 2.666 4.375a.143.143 0 01.017.1c-.008.034-.042.009-.092.017H9.2c-.133 0-.225-.008-.283-.092-.175-.35-.359-.691-.534-1.041a33.608 33.608 0 00-.566-1.05c-.2-.359-.4-.717-.6-1.084H7.2c-.175.359-.367.717-.558 1.075-.192.359-.384.717-.567 1.067-.192.35-.383.708-.575 1.05-.033.083-.1.092-.192.092H3.475c-.033 0-.058.016-.058-.025a.116.116 0 01.016-.092l2.592-4.25L3.5 5.116c-.025-.033-.033-.067-.017-.083.017-.025.05-.034.084-.034h1.891c.042 0 .084.009.117.017a.236.236 0 01.083.075c.159.358.342.717.534 1.075.2.358.391.708.6 1.058.2.35.383.7.558 1.059h.017c.175-.367.358-.725.541-1.075.184-.35.375-.7.567-1.05.192-.35.375-.709.558-1.05.009-.034.025-.067.05-.084a.159.159 0 01.109-.016h1.758a.077.077 0 01.091.058c.009.008-.008.042-.024.058zM14.866 13.917a4.144 4.144 0 01-1.791-.375 2.906 2.906 0 01-1.259-1.134c-.308-.508-.458-1.141-.458-1.9a3.423 3.423 0 011.783-3.05c.584-.325 1.284-.483 2.109-.483.041 0 .1 0 .175.008.075.009.158.009.258.017V4.367c0-.059.025-.092.083-.092h1.692c.042-.008.075.025.083.058v7.95c0 .15.009.317.017.5.017.175.025.342.033.484 0 .058-.025.108-.083.133a6.365 6.365 0 01-1.358.4 7.35 7.35 0 01-1.284.117zm.817-1.667V8.583c-.075-.016-.15-.033-.225-.041-.092-.009-.183-.017-.275-.017-.325 0-.65.067-.942.217-.283.141-.525.35-.708.616-.183.267-.275.625-.275 1.059-.008.291.042.583.142.858.083.225.208.425.375.592.158.15.35.266.566.333.225.075.459.108.692.108.125 0 .242-.008.35-.016a.73.73 0 00.3-.042z"
            fill="#FF61F6"
          />
        </g>
      </Icon>
      <Text>AdobexdLogo</Text>
    </Flex>
    <Flex
      p="20px"
      alignItems="center"
      justifyContent="center"
      flexDirection="column"
      border="2px solid"
      borderRadius="15px"
      borderColor="whiteAlpha.300"
    >
      <Icon viewBox="0 0 24 24" h="36px" w="36px" color="teal.300" mb="20px">
        <g>
          <path
            d="M6.427 9.239a.57.57 0 00-.798-.108.591.591 0 00-.167.209l-4.9 9.803a.586.586 0 00.524.847h6.827a.562.562 0 00.523-.324c1.474-3.043.58-7.67-2.01-10.427z"
            fill="#2684FF"
          />
          <path
            d="M10.028.318a12.932 12.932 0 00-.755 12.765l3.292 6.583a.586.586 0 00.523.324h6.826a.583.583 0 00.586-.585c0-.091-.02-.18-.06-.262L11.024.315a.552.552 0 00-.997 0v.003z"
            fill="#2684FF"
          />
        </g>
      </Icon>
      <Text>AtlassianLogo</Text>
    </Flex>
    <Flex
      p="20px"
      alignItems="center"
      justifyContent="center"
      flexDirection="column"
      border="2px solid"
      borderRadius="15px"
      borderColor="whiteAlpha.300"
    >
      <Icon viewBox="0 0 24 24" h="36px" w="36px" color="teal.300" mb="20px">
        <g clip-path="url(#clip0)">
          <path
            d="M18.687 0H2.313A1.813 1.813 0 00.5 1.811v16.374C.5 19.188 1.312 20 2.313 20h16.374a1.813 1.813 0 001.813-1.813V1.812A1.813 1.813 0 0018.687 0z"
            fill="#DC395F"
          />
          <path
            d="M7.184 6.293c.665 0 1.222-.522 1.222-1.204 0-.683-.557-1.204-1.222-1.204-.665 0-1.222.521-1.222 1.204 0 .682.557 1.204 1.222 1.204zM4.65 12.739a4.134 4.134 0 00-.108.905c0 1.06.575 1.764 1.797 1.764 1.013 0 1.834-.602 2.426-1.573l-.361 1.449h2.012l1.15-4.612c.287-1.168.844-1.774 1.689-1.774.665 0 1.078.413 1.078 1.096 0 .197-.018.413-.09.646l-.593 2.12c-.09.306-.126.611-.126.899 0 1.006.593 1.742 1.833 1.742 1.06 0 1.904-.682 2.371-2.317l-.79-.305c-.395 1.095-.737 1.293-1.006 1.293-.27 0-.414-.18-.414-.538 0-.162.037-.342.09-.558l.575-2.065c.144-.485.198-.915.198-1.31 0-1.546-.934-2.352-2.066-2.352-1.06 0-2.138.956-2.677 1.962l.395-1.806H8.962L8.53 8.996h1.438l-.885 3.544c-.695 1.545-1.972 1.57-2.132 1.534-.264-.06-.432-.159-.432-.5 0-.198.036-.482.126-.823l1.348-5.346H4.579l-.431 1.591h1.419L4.65 12.74"
            fill="#fff"
          />
        </g>
      </Icon>
      <Text>InvisionLogo</Text>
    </Flex>
    <Flex
      p="20px"
      alignItems="center"
      justifyContent="center"
      flexDirection="column"
      border="2px solid"
      borderRadius="15px"
      borderColor="whiteAlpha.300"
    >
      <Icon viewBox="0 0 24 24" h="36px" w="36px" color="teal.300" mb="20px">
        <g clip-path="url(#clip0)">
          <path
            d="M20.26 10.42l-8.863-8.93-.86-.865-6.67 6.722L.814 10.42a.827.827 0 000 1.162l6.096 6.14 3.627 3.654 6.67-6.722.105-.104 2.947-2.964a.824.824 0 000-1.166zm-9.722 3.649L7.493 11l3.045-3.068L13.582 11l-3.044 3.068z"
            fill="#2684FF"
          />
          <path
            d="M10.537 7.932a5.184 5.184 0 01-1.502-3.637A5.185 5.185 0 0110.515.65L3.852 7.36l3.626 3.654 3.06-3.082z"
            fill="url(#paint0_linear)"
          />
          <path
            d="M13.59 10.992l-3.053 3.076a5.186 5.186 0 011.502 3.653c0 1.37-.54 2.683-1.502 3.652l6.682-6.728-3.63-3.653z"
            fill="url(#paint1_linear)"
          />
        </g>
      </Icon>
      <Text>JiraLogo</Text>
    </Flex>
    <Flex
      p="20px"
      alignItems="center"
      justifyContent="center"
      flexDirection="column"
      border="2px solid"
      borderRadius="15px"
      borderColor="whiteAlpha.300"
    >
      <Icon viewBox="0 0 24 24" h="36px" w="36px" color="teal.300" mb="20px">
        <svg
          width="24"
          height="20"
          viewBox="0 0 21 15"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle cx="6.63158" cy="7.49999" r="6.63158" fill="#EB001B" />
          <circle cx="14.3686" cy="7.49999" r="6.63158" fill="#F79E1B" />
        </svg>
      </Icon>
      <Text>MastercardIcon</Text>
    </Flex>
    <Flex
      p="20px"
      alignItems="center"
      justifyContent="center"
      flexDirection="column"
      border="2px solid"
      borderRadius="15px"
      borderColor="whiteAlpha.300"
    >
      <Icon viewBox="0 0 24 24" h="36px" w="36px" color="teal.300" mb="20px">
        <g clip-path="url(#clip0)" fill-rule="evenodd" clip-rule="evenodd">
          <path
            d="M7.832.5c-1.105 0-2 .919-1.999 2.05 0 1.13.895 2.048 2 2.05h2V2.55c.001-1.13-.894-2.048-2-2.05zm0 5.467H2.5c-1.106 0-2.001.918-2 2.05-.002 1.13.894 2.048 2 2.05h5.332c1.106-.001 2.002-.919 2-2.05.002-1.132-.894-2.05-2-2.05z"
            fill="#36C5F0"
          />
          <path
            d="M20.5 8.016c0-1.13-.895-2.048-2-2.05-1.106.002-2.002.92-2 2.05v2.05h2c1.105 0 2-.918 2-2.05zm-5.334 0V2.55c.001-1.13-.893-2.048-2-2.05-1.105 0-2 .919-2 2.05v5.466c-.001 1.131.894 2.049 2 2.05 1.106 0 2.001-.918 2-2.05z"
            fill="#2EB67D"
          />
          <path
            d="M13.166 21c1.106 0 2.001-.919 2-2.05.001-1.13-.894-2.048-2-2.05h-2v2.05c-.001 1.13.894 2.048 2 2.05zm0-5.467h5.333c1.106-.001 2.002-.92 2-2.05.002-1.131-.893-2.049-1.999-2.05h-5.333c-1.106 0-2.001.918-2 2.05-.001 1.13.893 2.049 1.999 2.05z"
            fill="#ECB22E"
          />
          <path
            d="M.5 13.483c-.001 1.13.895 2.049 2 2.05 1.106-.001 2.001-.92 2-2.05v-2.05h-2c-1.105.001-2.001.919-2 2.05zm5.333 0v5.467c-.001 1.13.894 2.048 2 2.05 1.105 0 2-.919 2-2.05v-5.465c.002-1.131-.894-2.05-2-2.05-1.106 0-2 .917-2 2.048z"
            fill="#E01E5A"
          />
        </g>
      </Icon>
      <Text>SlackLogo</Text>
    </Flex>
    <Flex
      p="20px"
      alignItems="center"
      justifyContent="center"
      flexDirection="column"
      border="2px solid"
      borderRadius="15px"
      borderColor="whiteAlpha.300"
    >
      <Icon viewBox="0 0 24 24" h="36px" w="36px" color="teal.300" mb="20px">
        <g clip-path="url(#clip0)">
          <path
            d="M10.5 0C4.977 0 .5 4.477.5 10s4.477 10 10 10 10-4.477 10-10c0-5.522-4.477-10-10-10zm4.586 14.422a.623.623 0 01-.857.208c-2.348-1.435-5.304-1.76-8.785-.964a.623.623 0 11-.277-1.216c3.808-.87 7.076-.495 9.712 1.115.294.181.387.564.207.857zm1.223-2.722a.78.78 0 01-1.072.257c-2.687-1.652-6.786-2.13-9.965-1.166a.78.78 0 01-.973-.519.781.781 0 01.52-.972c3.632-1.102 8.147-.569 11.233 1.329a.78.78 0 01.258 1.072zm.106-2.835C13.19 6.95 7.875 6.775 4.797 7.708a.935.935 0 11-.543-1.79c3.533-1.072 9.404-.865 13.115 1.338a.935.935 0 01-.954 1.609z"
            fill="#2EBD59"
          />
        </g>
      </Icon>
      <Text>SpotifyLogo</Text>
    </Flex>
    <Flex
      p="20px"
      alignItems="center"
      justifyContent="center"
      flexDirection="column"
      border="2px solid"
      borderRadius="15px"
      borderColor="whiteAlpha.300"
    >
      <Icon viewBox="0 0 24 24" h="36px" w="36px" color="teal.300" mb="20px">
        <svg
          width="26"
          height="20"
          viewBox="0 0 30 9"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M12.6708 2.96349C12.6568 4.15055 13.653 4.81298 14.4034 5.20684C15.1744 5.61099 15.4333 5.87013 15.4304 6.23147C15.4245 6.78459 14.8153 7.02862 14.2452 7.03812C13.2505 7.05475 12.6723 6.74889 12.2125 6.51753L11.8542 8.32341C12.3155 8.55247 13.1696 8.75217 14.0554 8.76087C16.1345 8.76087 17.4947 7.65543 17.5021 5.94145C17.5102 3.76625 14.7087 3.64579 14.7278 2.67348C14.7344 2.37871 14.9956 2.06408 15.568 1.98406C15.8512 1.94368 16.6332 1.91274 17.5198 2.35252L17.8677 0.605286C17.391 0.418253 16.7782 0.239136 16.0153 0.239136C14.0583 0.239136 12.6819 1.35962 12.6708 2.96349ZM21.2115 0.389687C20.8319 0.389687 20.5118 0.628245 20.3691 0.99433L17.3991 8.63249H19.4767L19.8901 7.40183H22.429L22.6689 8.63249H24.5L22.9021 0.389687H21.2115ZM21.5021 2.61641L22.1016 5.7116H20.4596L21.5021 2.61641ZM10.1518 0.389687L8.51418 8.63249H10.4939L12.1308 0.389687H10.1518ZM7.22303 0.389687L5.16233 6.00003L4.32878 1.22966C4.23097 0.697187 3.84472 0.389687 3.41579 0.389687H0.0471011L0 0.629037C0.691574 0.790671 1.47729 1.0514 1.95326 1.33033C2.24457 1.50067 2.32775 1.64964 2.42336 2.05458L4.00214 8.63249H6.0945L9.3021 0.389687H7.22303Z"
            fill="#4318FF"
          />
        </svg>
      </Icon>
      <Text>VisaIcon</Text>
    </Flex>
  </SimpleGrid>
</DarkMode>

<HStack>
  {/* The default icon size is 1em (16px) */}
  <CircleIcon />
  {/* Use the `boxSize` prop to change the icon size */}
  <CircleIcon boxSize={6} />
  {/* Use the `color` prop to change the icon color */}
  <CircleIcon boxSize={8} color="red.500" />
</HStack>

Fallback Icon#

When children is not provided, the Icon component renders a fallback icon.

<Icon />

<Icon />

Props#

`Icon` props#

Name	Type	Default	Description
`viewBox`	`string`	`0 0 24 24`	The viewBox of the icon.
`boxSize`	`string`	`1em`	The size (width and height) of the icon.
`color`	`string`	`currentColor`	The color of the icon.
`focusable`	`boolean`	`false`	Denotes that the icon is not an interactive element, and only used for presentation.
`role`	`presentation`, `img`	`presentation`	The html role of the icon.
`children`	`React.ReactNode`		The Path or Group of the icon

`createIcon` options#

`defaultProps`

Description

Default props automatically passed to the component; overwriteable

Type

IconProps

`displayName`

Description

The display name useful in the dev tools

Type

string

`path`

Description

The svg path or group element

Type

React.ReactElement | React.ReactElement[]

`viewBox`

Description

The icon svg viewBox

Type

string

Default

"0 0 24 24"

Icon

Installation#

Usage#

All icons#

Using a third-party icon library#

Some examples#

Creating your custom icons#

Using the Icon component#

Using the createIcon function#

Tips for generating your own icons#

Custom Icons#

Fallback Icon#

Props#

Icon props#

createIcon options#

displayName

path

viewBox

Using the `Icon` component#

Using the `createIcon` function#

`Icon` props#

`createIcon` options#

`displayName`

`path`

`viewBox`