Guide
Components
Icon

IconifyIcon Component

ℹ️

The IconifyIcon component is a React component that simplifies the usage of icons from the Iconify library. It allows you to easily display icons in your application by providing the icon name from Iconify. For available icons, see Iconify Design (opens in a new tab).

Icons List Preview

IconifyIcon Example

Usage

import { IconifyIcon } from "@/@core";
 
// Render IconifyIcon component with icon name
const MyIconComponent = () => {
  return <IconifyIcon icon="mdi:home" />;
};
 
export default MyIconComponent;

Props

Prop nameTypeRequiredDescription
iconstringYesIcon name from Iconify. For available icons, see Iconify Design (opens in a new tab).
...restanyNoAny other props that can be passed to the underlying Icon component.

Example

Here is an example of using the IconifyIcon component:

<IconifyIcon icon="mdi:home" />
ℹ️

This will render an Iconify icon with the specified name (mdi:home) and a default font size of 1.375rem. You can customize the icon and its appearance by providing different props as needed.

Customizing Icon Appearance

ℹ️

You can customize the appearance of the icon by providing props to the IconifyIcon component. The IconifyIcon component accepts any props that can be passed to the underlying Icon component. For a list of available props, see the Icon component documentation (opens in a new tab).

Customizing Icon Size

<IconifyIcon icon="mdi:home" className="text-secondary" fontSize="2rem" />
ℹ️

This will render an Iconify icon with the specified name (mdi:home) and a font size of 2rem. The icon will also have the text-secondary class applied to it.

FaqsIndicator