lucide

Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.

11,883

548

11,883

258

View on GitHub View on NPM

Top Related Projects

feather

24,931

Simply beautiful open-source icons

tabler-icons

18,461

A set of over 5700 free MIT-licensed high-quality SVG icons for you to use in your web projects.

octicons

8,302

A scalable set of icons handcrafted with <3 by GitHub

ionicons

17,564

Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎

Font-Awesome

74,425

The iconic SVG, font, and CSS toolkit

material-design-icons

50,829

Material Design icons by Google (Material Symbols)

Quick Overview

Lucide is a collection of open-source, MIT-licensed icons that can be used in web projects, mobile apps, and other digital products. It provides a comprehensive set of high-quality, customizable icons that can be easily integrated into various user interfaces.

Pros

Extensive Icon Library: Lucide offers a wide range of over 1,500 icons covering a diverse set of categories, making it a versatile choice for various design needs.
Open-Source and MIT-Licensed: The project is open-source and licensed under the MIT license, allowing for free use, modification, and distribution.
Customizable: The icons can be easily customized in terms of size, color, and other visual properties to fit the specific design requirements of a project.
Cross-Platform Compatibility: Lucide icons are designed to work seamlessly across different platforms, including web, mobile, and desktop applications.

Cons

Lack of Official Documentation: While the project provides some documentation, it could benefit from more comprehensive and detailed guides for users.
Potential Versioning Issues: As an open-source project, Lucide may experience version changes that could introduce breaking changes, requiring developers to stay up-to-date with the latest updates.
Limited Accessibility Features: The project currently lacks built-in accessibility features, such as support for screen readers or alternative text descriptions for the icons.
Dependency on External Libraries: Depending on the implementation, using Lucide icons may require the integration of additional libraries or frameworks, which could increase the complexity of the project setup.

Code Examples

If you're using Lucide icons in a web project, you can import them using a module bundler like Webpack or Rollup. Here's an example of how to use the home icon:

import { Home } from 'lucide-react';

function MyComponent() {
  return (
    <div>
      <Home size={24} color="#333" />
    </div>
  );
}

Alternatively, you can use the icons directly in your HTML by referencing the SVG files:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M9 22V12h6v10" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

You can also use Lucide icons in your React Native project by installing the lucide-react-native package:

import { Home } from 'lucide-react-native';

function MyComponent() {
  return (
    <View>
      <Home size={24} color="#333" />
    </View>
  );
}

Getting Started

To get started with Lucide, follow these steps:

Install the Lucide package using your preferred package manager:

# Using npm
npm install lucide-react

# Using yarn
yarn add lucide-react

Import the desired icons from the lucide-react package and use them in your React components:

import { Home, Search, Settings } from 'lucide-react';

function MyApp() {
  return (
    <div>
      <Home size={24} color="#333" />
      <Search size={24} color="#333" />
      <Settings size={24} color="#333" />
    </div>
  );
}

Customize the icons by adjusting the size and color props as needed.
Explore the Lucide icon library and choose the icons that best fit your project's design requirements.

Competitor Comparisons

feather

24,931

Simply beautiful open-source icons

Pros of Feather

Original and well-established icon set with a clean, minimalist design
Widely recognized and used in many popular projects and frameworks
Smaller file size due to fewer icons, potentially leading to faster load times

Cons of Feather

Less frequent updates and slower development cycle
Fewer icons available compared to Lucide (286 vs. 1000+)
Limited community contributions and feature requests

Code Comparison

Feather:

import { feather } from 'feather-icons'

feather.icons.x.toSvg()

Lucide:

import { createIcons, X } from 'lucide'

createIcons({
  icons: {
    X
  }
})

Both libraries offer similar functionality for icon usage, but Lucide provides more flexibility in icon selection and customization. Lucide is a community-driven fork of Feather, offering an expanded icon set, more frequent updates, and increased customization options. While Feather remains a solid choice for basic icon needs, Lucide provides a more comprehensive and actively maintained solution for developers seeking a wider variety of icons and features.

tabler-icons

18,461

A set of over 5700 free MIT-licensed high-quality SVG icons for you to use in your web projects.

Pros of Tabler Icons

Larger icon set with over 3,500 icons
Includes both stroke and solid icon styles
Offers a web app for easy icon browsing and customization

Cons of Tabler Icons

Less frequent updates compared to Lucide
Larger file size due to the extensive icon set
May have more inconsistencies in design due to the larger collection

Code Comparison

Lucide:

<script src="https://unpkg.com/lucide@latest"></script>
<i data-lucide="user"></i>
<script>
  lucide.createIcons();
</script>

Tabler Icons:

<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
  <circle cx="12" cy="7" r="4" />
  <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
</svg>

Both libraries offer easy-to-use icon sets for web projects. Lucide provides a more streamlined approach with a focus on consistency and regular updates, while Tabler Icons offers a larger variety of icons and styles. The choice between the two depends on project requirements and personal preference.

octicons

8,302

A scalable set of icons handcrafted with <3 by GitHub

Pros of Octicons

Officially maintained by GitHub, ensuring consistency with their platform
Includes specific icons for GitHub-related actions and concepts
Offers multiple file formats (SVG, PNG, AI) for versatility

Cons of Octicons

Smaller icon set compared to Lucide (fewer options)
Less frequent updates and additions to the icon library
More GitHub-centric, which may limit usefulness in non-GitHub projects

Code Comparison

Octicons usage:

<svg class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
  <path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
</svg>

Lucide usage:

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
</svg>

ionicons

17,564

Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎

Pros of Ionicons

Larger icon set with over 1,300 icons compared to Lucide's ~1,000
Specifically designed for use with Ionic Framework, offering seamless integration
Includes both iOS and Material Design style icons for cross-platform consistency

Cons of Ionicons

Heavier file size due to the larger icon set
Less frequent updates compared to Lucide's active development
More complex implementation for non-Ionic projects

Code Comparison

Ionicons usage:

<ion-icon name="heart"></ion-icon>

Lucide usage:

<i data-lucide="heart"></i>
<script>
  lucide.createIcons();
</script>

Both libraries offer simple implementation, but Ionicons is more straightforward for Ionic Framework projects, while Lucide requires a JavaScript call to create icons.

Ionicons is ideal for Ionic-based applications and those needing a larger icon set, while Lucide offers a lighter-weight solution with more frequent updates, suitable for various web projects. The choice between them depends on the specific project requirements and framework preferences.

Font-Awesome

74,425

The iconic SVG, font, and CSS toolkit

Pros of Font-Awesome

Larger icon set with over 7,000 icons
Includes both free and paid premium icons
Widely adopted and recognized in the web development community

Cons of Font-Awesome

Larger file size due to extensive icon set
Some features and icons require a paid subscription
More complex implementation compared to simpler icon libraries

Code Comparison

Font-Awesome (using SVG with JavaScript):

<script src="https://kit.fontawesome.com/your-kit-code.js" crossorigin="anonymous"></script>
<i class="fas fa-user"></i>

Lucide:

<script src="https://unpkg.com/lucide@latest"></script>
<i data-lucide="user"></i>
<script>lucide.createIcons();</script>

Both libraries offer easy integration, but Font-Awesome requires a kit code, while Lucide uses a simpler approach with data attributes.

Font-Awesome provides more customization options and styles out of the box, whereas Lucide focuses on simplicity and lightweight implementation. Lucide is open-source and free, making it more accessible for developers who don't need an extensive icon set or premium features.

The choice between the two depends on project requirements, budget constraints, and personal preferences for icon design and implementation complexity.

material-design-icons

50,829

Material Design icons by Google (Material Symbols)

Pros of Material Design Icons

Extensive collection with over 2,000 icons
Official Google design system, ensuring consistency with Android and other Google products
Available in multiple formats (SVG, PNG, font) and styles (filled, outlined, rounded, etc.)

Cons of Material Design Icons

Larger file size due to the extensive collection
Less frequent updates compared to Lucide
More complex implementation, especially for custom icon usage

Code Comparison

Material Design Icons:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons">face</i>

Lucide:

<script src="https://unpkg.com/lucide@latest"></script>
<i data-lucide="face"></i>
<script>lucide.createIcons();</script>

Key Differences

Lucide offers a more lightweight and customizable solution
Material Design Icons provides a broader range of icons and styles
Lucide has a simpler implementation process, especially for custom icons
Material Design Icons benefits from Google's design expertise and ecosystem integration

Both libraries have their strengths, and the choice between them depends on project requirements, design preferences, and performance considerations.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Icons Â· Guide Â· Packages Â· License Â· Showcase

Lucide

Lucide is an open-source icon library that provides 1000+ vector (svg) files for displaying icons and symbols in digital and non-digital projects. The library aims to make it easier for designers and developers to incorporate icons into their projects by providing several official packages to make it easier to use these icons in your project.

Packages

	Package	Version & Downloads	Links
	`lucide`		Docs Source
	`lucide-react`		Docs Source
	`lucide-vue-next`		Docs Source
	`lucide-svelte`		Docs Source
	`lucide-solid`		Docs Source
	`lucide-preact`		Docs Source
	`lucide-react-native`		Docs Source
	`lucide-angular`		Docs Source
	`lucide-static`		Docs Source