Icons

The Icon component displays icons from various sources including Lucide icons, Font Awesome, and custom images.

Usage

Code

mdx

1<Icon icon="rocket" size={24} color="#3b82f6" />

This task iscomplete!

Want to learn more?Check the docs.

Prop	Type	Default	Description
`icon`	`string \| ReactNode`	required	Icon name, URL, or React node
`iconType`	`string`	`"regular"`	Font Awesome style (if using FA)
`color`	`string`	-	Icon color (CSS color value)
`size`	`number`	`20`	Icon size in pixels
`className`	`string`	-	Additional CSS classes

Use kebab-case icon names from Lucide:

Code

mdx

1<Icon icon="arrow-right" />
2<Icon icon="check-circle" />
3<Icon icon="external-link" />

Use any image URL or local path:

Code

mdx

1<Icon icon="/images/logo.svg" size={24} />
2<Icon icon="https://example.com/icon.png" size={24} />

Prefix icons with fa- to use Font Awesome:

Code

mdx

1<Icon icon="fa-github" iconType="brands" />