Icon

Nature UI provides multiple ways to use icons in your project:

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

Using Nature UI icons#

Nature UI provides a set of commonly used interface icons you can use in your project and also exports most icon packs in react-icons. To use these icons, install @nature-ui/icons, import the icons you need and style them.

Installation#

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

Usage#

import { PhoneIcon, AddIcon, WarningIcon, Md } from '@nature-ui/icons'
// The default icon size is 1em (16px)
<PhoneIcon />
// Use the `size` prop to change the icon size
<AddIcon size="lg" />
// Use the `color` prop to change the icon color
<WarningIcon className="text-red-400" />
// Import and use `material design` icon park.
<Md.MdAccessible size="2rem" />

Using a third-party icon library#

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

Note: Nature UI comes with react-icons and you can access it directly from @nature-ui/icons

  • Import the Icon component from @nature-ui/core
  • Pass the desired third party icon into the as prop
// 1. Import
import { Icon } from '@nature-ui/core';
import { MdSettings } from 'react-icons/md';
// 2. Use the `as` prop
function Example() {
return <Icon as={MdSettings} />;
}

Some examples#

Editable Example

Creating your custom icons#

Nature UI provides two methods for creating your custom icons:

They can be imported from @nature-ui/core:

import { Icon, createIcon } from '@nature-ui/core';

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.

Editable Example

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 tailwindcss classNames props:

Editable Example

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 '@nature-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',
});

Props#

Icon component composes Box so you can pass all Box props.

NameTypeDefaultDescription
sizesm | md | lg | xl | string1emThe size of the icon.
namestringThe name of the icon.
colorstringcurrentColorThe color of the icon.
focusablebooleanfalseDenotes that the icon is not an interative element, and only used for presentation.
rolepresentation, imgpresentationThe html role of the icon.