lucide-icons / Lucide
Programming Languages
Projects that are alternatives of or similar to Lucide
Lucide
What is Lucide?
Lucide is a community-run fork of Feather Icons, open for anyone to contribute icons.
Table of Contents
Installation
Package Managers
npm install lucide
#or
yarn add lucide
CDN
<!-- Development version -->
<script src="https://unpkg.com/[email protected]/dist/umd/lucide.js"></script>
<!-- Production version -->
<script src="https://unpkg.com/[email protected]"></script>
Usage
At its core, Lucide is a collection of SVG files. This means that you can use Feather icons in all the same ways you can use SVGs (e.g. img, background-image, inline, object, embed, iframe). Here's a helpful article detailing the many ways SVGs can be used on the web: SVG on the Web – Implementation Options
The following are additional ways you can use Lucide. With the Javascript library you can easily incorporate the icon you want in your webpage.
With unpkg
Here is a complete example with unpkg
<!DOCTYPE html>
<body>
<i icon-name="volume-2" class="my-class"></i>
<i icon-name="x"></i>
<i icon-name="menu"></i>
<script src="https://unpkg.com/[email protected]"></script>
<script>
lucide.createIcons();
</script>
</body>
With ESModules
To reduce bundle size, lucide is built to be fully treeshakable.
The createIcons function will search for HTMLElements with the attribute icon-name and replace it with the svg from the given icon name.
<!-- Your HTML file -->
<i icon-name="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: 'icon-name', // 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);
With React
You can also use the Lucide library using the react package.
yarn add lucide-react
# or
npm install lucide-react
For more details, see the documentation.
With Vue
You can also use the Lucide library using the Vue package.
yarn add lucide-vue
# or
npm install lucide-vue
For more details, see the documentation.
Figma
You can use the components from this Figma file.
Contributing
For more info on how to contribute please see the contribution guidelines.
Caught a mistake or want to contribute to the documentation? Edit this page on Github
Community
Join the community on our Discord server!
License
Lucide is licensed under the ISC License.
