Package Exports

lucide
lucide/dist/cjs/lucide.js
lucide/dist/esm/lucide.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (lucide) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Lucide

Implementation of the lucide icon library for web applications.

Installation

Package Managers

npm install lucide

yarn add lucide

CDN

<!-- Development version -->
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>

<!-- Production version -->
<script src="https://unpkg.com/lucide@latest"></script>

Usage

With unpkg

Here is a complete example with unpkg

<!DOCTYPE html>
<body>
  <i data-lucide="volume-2" class="my-class"></i>
  <i data-lucide="x"></i>
  <i data-lucide="menu"></i>

  <script src="https://unpkg.com/lucide@latest"></script>
  <script>
    lucide.createIcons();
  </script>
</body>

With ESModules

To reduce bundle size, lucide is built to be fully tree-shakable. The createIcons function will search for HTMLElements with the attribute data-lucide and replace it with the svg from the given icon name.

<!-- Your HTML file -->
<i data-lucide="menu"></i>

import { createIcons, icons } from 'lucide';

// Caution, this will import all the icons and bundle them.
createIcons({ icons });

// Recommended way, to include only the icons you need.
import { createIcons, Menu, ArrowRight, Globe } from 'lucide';

createIcons({
  icons: {
    Menu,
    ArrowRight,
    Globe
  }
});

Additional Options

In the createIcons function you can pass some extra parameters to adjust the nameAttr or add custom attributes like for example classes.

Here is a full example:

import { createIcons } from 'lucide';

createIcons({
  attrs: {
    class: ['my-custom-class', 'icon'],
    'stroke-width': 1,
    stroke: '#333'
  },
  nameAttr: 'data-lucide' // attribute for the icon name.
});

Treeshake the library, only use the icons you use

import { createIcons, Menu, ArrowRight, Globe } from 'lucide';

createIcons({
  icons: {
    Menu,
    ArrowRight,
    Globe
  }
});

Custom Element binding

import { createElement, Menu } from 'lucide';

const menuIcon = createElement(Menu); // Returns HTMLElement (svg)

// set custom attributes with browser native functions
menuIcon.setAttribute('stroke', '#333');
menuIcon.classList.add('my-icon-class');

// Append HTMLElement in webpage
const myApp = document.getElementById('app');
myApp.appendChild(menuIcon);