Chakra-UI

I♥️Components

Icon

|

Chakra Docs

|

⦾ The Icon component in Chakra UI is a versatile and highly customizable tool that allows developers to use icons in their applications. Icons can aid user comprehension and enhance the visual aesthetics of an application by providing context to actions or content.

The Icon component in Chakra UI can work with SVGs (Scalable Vector Graphics), font icons, and even CSS-in-JS icons. SVGs are recommended due to their scalability and customization options. Chakra UI uses the Box component as a base for the Icon component, which means you can apply all the style props you would to a Box component.

Here are the common props used with the Icon component:

  • as: Specifies the icon to be used. You can use Chakra's in-built icons, imported icons from other libraries, or custom SVG icons.
  • boxSize: The size of the icon. This determines both the height and width of the icon.
  • color: The color of the icon.

Beyond using pre-existing icons, you can also create custom icons by leveraging SVGs. Chakra UI provides helper functions and components to create consistent, theme-able, and accessible custom icons.

Icons are crucial in UI design as they guide users, save space, and improve aesthetics. Chakra UI's Icon component, with its simplicity and flexibility, makes it easy for developers to integrate and manage icons in their applications.

Icon libraries and components can be installed as follows, and individual icons can be imported as shown in the accompanying code.

Chakra reminds you to avoid passing onClick handlers to icon components and rather to use the IconButton component when you need a clickable icon.

Examples

Chakra's Built-In Icons

⦾ Chakra UI comes with its own set of icons. To use them, import the icon you need and pass it to the as prop of the Icon Icon. To see a full list of Chakra's built-in icons, visit the Chakra Docs. The following icons are used at their default sizes and color, which is the default color of this site.

Code

Using External Icons

⦾ Chakra UI's Icon component can also take in icons from external libraries like react-icons. For these icon examples, I have increased the size to boxSize=9. And I have specified colors for each.

Utilizing third-party icon libraries, such as react-icons, within Chakra UI can be accomplished in a few straightforward steps. Initially, you need to import the Icon component from @chakra-ui/react. Subsequently, you can specify the icon from your preferred external library by assigning it to the as prop of the imported Icon component.

Code

Creating Custom Icons

⦾ Creating your own custom icons in Chakra UI can open up a world of personalized design possibilities. This can be achieved through two methods provided by Chakra UI: using the Icon component or using the createIcon function. These methods can be imported from @chakra-ui/react. They both offer the flexibility to style your icon with style props as required.

⦾ Using the Icon Component: The Icon component is an SVG element that allows you to create your own SVG paths. Here's an example where I have created a function that produces a custom icon, which implement in the same way as Chakra icons or react-icons.

Code

Using the createIcon Function

⦾ The createIcon function is a convenient way to generate icons. It wraps around the Icon component and offers similar functionality with less effort.

The createIcon function provides a streamlined way to create icons in your Chakra UI powered applications, and can often lead to cleaner, more maintainable code. Here are a few reasons why it may be preferred:

  • Code Clarity: createIcon provides a clear and simple way to define an icon. It encapsulates the underlying SVG structure and abstracts it into a simple object-based structure. The function takes care of setting up the SVG for you, and you just need to specify the path data and viewBox. This makes your icon definitions more compact and easier to read and understand.
  • Better Typing for TypeScript: If you're using TypeScript, createIcon allows for better type safety as it defines what a Chakra UI Icon should be. The IconProps used in createIcon make it easier for TypeScript to infer the correct types and provide better autocompletion and error checking in your IDE.
  • Less Boilerplate: With createIcon, you do not need to write the common SVG attributes every time you want to define a new icon. It takes care of the repetitive tasks for you, keeping your code DRY (Don't Repeat Yourself).
  • Default Props: createIcon allows you to set default props for your icons. For example, you can set a default color for your icon using the defaultProps attribute. This is more difficult to achieve if you are creating icons using the Icon component directly.
  • Consistency: Using createIcon helps to maintain consistency across your application as all icons are created in a similar manner.

Code

Did you know?

Creative Idea No. 1

Icon as Button: You can use an Icon as a clickable button in your application. This is handy for actions like delete, edit, close etc. In this example, we're using the IconButton component of Chakra UI, which lets you use an icon as a button. The icon prop is provided with an icon from react-icons library, and we attach a callback function to the onClick prop to handle the click event.

Code

Creative Idea No. 2

Icon as List Bullets: You can use an Icon as bullet points in your list. In this example, we're using the Icon component as bullet points for the ListItem component. The as prop is provided with an icon from react-icons library, and we've added a margin to separate the icon from the text.
  • Starred item 1
  • Starred item 2

Code

Creative Idea No. 3

Icon as Form Input Addons: Icons can be used inside form inputs as addons to provide context to the user. In this example, we're using the Icon inside an InputGroup component to indicate that it's a password input field. The InputLeftElement component is used to place an element at the left of the input field.

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.