mirror of
https://github.com/lucide-icons/lucide.git
synced 2026-11-14 13:58:21 +00:00
24 lines
725 B
Markdown
24 lines
725 B
Markdown
|
---
|
||
|
|
title: With Lucide Lab or custom icons - React
|
||
|
|
description: Learn how to use Lucide Lab or custom icons in your React applications using the Icon component.
|
||
|
|
---
|
||
|
|
# With Lucide Lab or custom icons
|
||
|
|
|
||
|
|
[Lucide Lab](https://github.com/lucide-icons/lucide-lab) is a collection of icons that are not part of the Lucide main library.
|
||
|
|
|
||
|
|
They can be used by using the `Icon` component.
|
||
|
|
All props like regular lucide icons can be passed to adjust the icon appearance.
|
||
|
|
|
||
|
|
## Using the `Icon` component
|
||
|
|
|
||
|
|
This creates a single icon based on the iconNode passed and renders a Lucide icon component.
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import { Icon } from 'lucide-react';
|
||
|
|
import { coconut } from '@lucide/lab';
|
||
|
|
|
||
|
|
const App = () => (
|
||
|
|
<Icon iconNode={coconut} />
|
||
|
|
);
|
||
|
|
```
|