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.

When using React Icons, set the component to as.

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

<Icon as={FaRobot} />

When using Lucide lab, use LucideIcon.

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

<LucideIcon iconNode={burger} />

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.

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.

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" />

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