Chakra UI Icon - Horizon UI

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:

  1. Import the Icon component from @chakra-ui/react
  2. 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:

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.

<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="brand.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="brand.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="brand.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="brand.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="brand.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="brand.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="brand.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="brand.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="brand.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="brand.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="brand.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="brand.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="brand.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="brand.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="brand.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="brand.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="brand.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="brand.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="brand.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="brand.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="brand.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="brand.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="brand.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>
<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#

NameTypeDefaultDescription
viewBoxstring0 0 24 24The viewBox of the icon.
boxSizestring1emThe size (width and height) of the icon.
colorstringcurrentColorThe color of the icon.
focusablebooleanfalseDenotes that the icon is not an interactive element, and only used for presentation.
rolepresentation, imgpresentationThe html role of the icon.
childrenReact.ReactNodeThe 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"

Horizon UI © 2021-2023 Copyright. All Rights Reserved.

  • Blog
  • License