Icon

Nature UI provides multiple ways to use icons in your project

Using Nature 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 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#

<Stack row className="items-center">
  {/* The default icon size is 1em (16px) */}
  <Icon as={MdSettings} />

  {/* Use the `boxSize` prop to change the icon size */}
  <Icon as={MdReceipt} size={"1.5rem"} />

  {/* Use the `color` prop to change the icon color */}
  <Icon as={MdGroupWork} size="xl" className="text-red-500" />
</Stack>

Creating your custom icons#

Nature UI provides two methods for creating your custom icons:

Using the Icon component
Using the createIcon function

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.

<Icon viewBox="0 0 200 200" className="text-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 tailwindcss classNames props:

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>
);

function Example() {
  return (
    <Stack row>
      {/* The default icon size is 1em (16px) */}
      <CircleIcon />

      {/* Use the `boxSize` prop to change the icon size */}
      <CircleIcon boxSize={"1.5rem"} />

      {/* Use the `color` prop to change the icon color */}
      <CircleIcon boxSize={"2rem"} className="text-red-500" />
    </Stack>
  );
}

render(<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.

Name	Type	Default	Description
`size`	`sm` \| `md` \| `lg` \| `xl` \| `string`	`1em`	The size of the icon.
`name`	`string`		The name of the icon.
`color`	`string`	`currentColor`	The color of the icon.
`focusable`	`boolean`	`false`	Denotes that the icon is not an interative element, and only used for presentation.
`role`	`presentation`, `img`	`presentation`	The html role of the icon.