Lucide Lab

Installation

npm install @lucide/lab

yarn add @lucide/lab

pnpm install @lucide/lab

[!NOTE] Requires Lucide core package to be installed in your project. For more info visit lucide installation guide.

Usage

React

import { burger } from '@lucide/lab';
import { Icon } from 'lucide-react';

function App() {
  return (
    <div>
      <Icon iconNode={burger} />
    </div>
  );
}

Vue

<script setup>
import { burger } from '@lucide/lab';
import { Icon } from '@lucide/vue';
</script>

<template>
  <div>
    <Icon :iconNode="burger" />
  </div>
</template>

Angular

// app.module.ts
import { LucideAngularModule } from 'lucide-angular';
import { atSignCircle } from '@lucide/lab';

@NgModule({
  imports: [
      LucideAngularModule.pick({ AtSignCircle: atSignCircle })
  ],
})

// app.component.html
<lucide-icon name = "AtSignCircle" > </lucide-icon>

Svelte

<script>
import { Icon } from '@lucide/svelte';
import { burger, sausage } from '@lucide/lab';
</script>

<Icon iconNode={burger} />
<Icon iconNode={sausage} color="red"/>

Solid

import { burger } from '@lucide/lab';
import { Icon } from 'lucide-solid';

function App() {
  return (
    <div>
      <Icon iconNode={burger} />
    </div>
  );
}

Preact

import { burger } from '@lucide/lab';
import { Icon } from 'lucide-preact';

function App() {
  return (
    <div>
      <Icon iconNode={burger} />
    </div>
  );
}

React Native

import { burger } from '@lucide/lab';
import { Icon } from 'lucide-react-native';

function App() {
  return (
    <div>
      <Icon iconNode={burger} />
    </div>
  );
}

Community

Join the community on our Discord server!

License

Lucide is totally free for commercial and personal use; this software is licensed under the ISC License.