Icon

Icon is a general icon component that can be used in your projects.

<GhostIcon />

Usage

import { GhostIcon } from "@yamada-ui/react"

import { GhostIcon } from "@/components/ui"

import { GhostIcon } from "@workspaces/ui"

<GhostIcon />

You can find all the icons we offer at here.

Using React Icons

When using React Icons, set the component to as.

import { Icon } from "@yamada-ui/react"
import { FaRobot } from "react-icons/fa"

<Icon as={FaRobot} />

Using Lucide lab

When using Lucide lab, use LucideIcon.

import { LucideIcon } from "@yamada-ui/react"

<LucideIcon iconNode={burger} />

Props

Icon

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

LucideIcon

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`iconNode`	-	`IconNode` The icon of the Lucide lab.

Accessibility

If you set aria-hidden={false} and aria-label on Icon or LucideIcon, it will be read by screen readers.

<Icon as={FaRobot} aria-hidden={false} aria-label="Robot" />

ARIA Roles and Attributes

Component	Roles and Attributes	Usage
`Icon`, `LucideIcon`	`role="img"`	Indicates that this is an image.
	`aria-hidden`	Excludes the element from the accessibility tree.

Similar Components

Avatar is a component that displays a profile picture or an icon with initials representing a user.

Image is a component that displays images.

Picture is a component that uses the picture element to provide alternative images for different display and device scenarios.

AspectRatio is a component for embedding things like videos and maps while maintaining the aspect ratio.

IconButton is a component that displays an icon within a button.

QrCode is a component that displays a QR code.

Used By Components & Hooks

Accordion is a component for a list that displays information in an expandable or collapsible manner.

Alert is a component that conveys information to the user.

Autocomplete is a component used to display suggestions in response to user text input.

Avatar is a component that displays a profile picture or an icon with initials representing a user.

Blockquote is a component that represents a quotation. By default, it renders a blockquote element.

Breadcrumb is a component that helps users understand the hierarchy of a website.

Calendar is a component for displaying or selecting dates in a calendar.

Carousel is a component that displays multiple elements like a slideshow.

Checkbox is a component used for allowing users to select multiple values from multiple options.

CheckboxCard is a component used for allowing users to select multiple values from multiple options.

CloseButton is a component used primarily to trigger the close functionality of a component.

ColorPicker is a component used by the user to select a color or enter an arbitrary color value.

ColorSelector is a component used by the user to select a color.

DatePicker is a component used for users to select a date.

Loading is a component displayed during waiting times, such as when data is being loaded.

Menu is a component that displays a common dropdown menu.

NativeAccordion is a component for a list that displays information in an expandable or collapsible manner using the HTML details element.

NativeSelect is a component used for allowing users to select one value from a list of options. It displays a native dropdown list provided by the browser (user agent).

NumberInput is a component used to obtain numeric input from the user.

Pagination is a component for managing the pagination and navigation of content.

PasswordInput is a component that allows users to input passwords with a visibility toggle.

Rating is a component used to allow users to provide ratings.

Reorder is a component that allows you to change the order of items using drag and drop.

Select is a component used for allowing a user to choose values from a list of options.

Stat is used to display numbers or data within a box.

Steps is a component that displays the progress of a multi-step process.

Table is a table component equipped with column sorting, row selection, and click event features.

Tag is a component used to categorize or organize items using keywords that describe them.

Tip is a component that displays supplementary information with a built-in icon trigger.