Question 1

Is Lucide Icons free for commercial projects?

Accepted Answer

Yes, completely. Lucide Icons is released under the MIT License which means you can use it in any personal or commercial project, modify the icons, redistribute them, and even include them in products you sell — all without paying anything or giving attribution. The only condition is that you keep the MIT license notice if you redistribute the source files themselves.

Question 2

Do I need to credit Lucide in my project?

Accepted Answer

No, attribution is not required for MIT licensed assets. You do not need to add any credit in your app, website, or product. However, if you are distributing the raw SVG files or the source code itself as part of a package or open source project, you should include the original MIT license file.

Question 3

How do I install Lucide Icons in a React project?

Accepted Answer

Run npm install lucide-react in your project terminal. Then import any icon by its PascalCase name directly from the package. For example: import { ArrowRight, Check, User } from 'lucide-react'. Each icon is a React component that accepts props like size, color, strokeWidth, and className. You can also pass any standard SVG attribute as a prop.

Question 4

How do I use Lucide Icons in a Next.js project?

Accepted Answer

Install with npm install lucide-react. In Next.js App Router, icons work in both Server Components and Client Components since they are just SVG elements with no browser-only APIs. Import and use them exactly like in React: import { Home, Settings } from 'lucide-react'. No special configuration needed. They are tree-shakeable so only the icons you import are included in your bundle.

Question 5

How do I use Lucide Icons in Vue 3?

Accepted Answer

Install with npm install lucide-vue-next. Then import icons as Vue components: import { ArrowRight } from 'lucide-vue-next'. Use them in your template as self-closing tags: <ArrowRight :size="24" color="#4F46E5" />. The package supports Vue 3 Composition API and Options API. For Nuxt 3, no additional configuration is needed.

Question 6

Can I use Lucide Icons without npm or a build tool?

Accepted Answer

Yes. Add the CDN script tag to your HTML: . Then place icon placeholder elements: . Finally call lucide.createIcons() in your script after the DOM loads. This replaces all data-lucide elements with the actual SVG icons. No build tool or Node.js required.

Question 7

How do I install Lucide in an Angular project?

Accepted Answer

Run npm install lucide-angular. Import LucideAngularModule in your app.module.ts and pass the icons you want to use: LucideAngularModule.pick({ ArrowRight, Check, Home }). Then use the icon component in your templates: . The pick method ensures only selected icons are bundled.

Question 8

How do I use Lucide Icons in Svelte or SvelteKit?

Accepted Answer

Install with npm install lucide-svelte. Import icons as Svelte components: import { ArrowRight } from 'lucide-svelte'. Use them in your markup: <ArrowRight size={24} color="#4F46E5" />. Icons are fully typed and tree-shakeable. SvelteKit works with no additional setup. The package supports both Svelte 3 and Svelte 4.

Question 9

How do I change the size of a Lucide icon?

Accepted Answer

Pass the size prop with a number value in pixels. Example: <ArrowRight size={32} />. The default size is 24. You can also use width and height props separately if you need non-square icons, though Lucide icons are designed for square use. In CSS you can also set width and height on the SVG element directly.

Question 10

How do I change the color of a Lucide icon?

Accepted Answer

There are three ways. First, use the color prop: . Second, use CSS since icons use currentColor by default — set color on a parent element and all icons inside inherit it:

. Third, use a className and target it with CSS or Tailwind: . The Tailwind method is most common in modern projects.

Question 11

How do I change the stroke width of a Lucide icon?

Accepted Answer

Use the strokeWidth prop. The default is 2. Example: for a lighter look or for a bolder look. Values between 1 and 3 work best. Going below 1 can make icons hard to see at small sizes. This is one of the key customization advantages of stroke-based icon sets like Lucide.

Question 12

Can I use Lucide icons with Tailwind CSS?

Accepted Answer

Yes, Lucide works perfectly with Tailwind. Since icons render as SVG elements, you can apply Tailwind classes directly. Use text utilities for color: className="text-indigo-600". Use w and h utilities for size: className="w-6 h-6". Example: <ArrowRight className="w-5 h-5 text-indigo-600 hover:text-indigo-800 transition-colors" />. This is the most popular way to use Lucide in Tailwind projects.

Question 13

How do I use Lucide icons in Figma?

Accepted Answer

Install the official Lucide Figma plugin from the Figma Community. Search for Lucide in the Figma plugin marketplace. Once installed, open it from Plugins menu, search for any icon by name, and insert it directly onto your canvas as a vector frame. Icons are inserted as individual vector components that you can recolor, resize, and modify freely.

Question 14

Are Lucide Icons tree-shakeable?

Accepted Answer

Yes. All Lucide packages are fully tree-shakeable. Only the icons you actually import are included in your final bundle. If you import 10 icons out of 1711, your bundle only contains those 10. This makes it safe to install the full package without worrying about bundle size. A single Lucide icon is typically around 0.5 to 1KB in your bundle.

Question 15

What is the viewBox and grid system Lucide uses?

Accepted Answer

All Lucide icons use a 24x24 viewBox. The design grid is 24x24 pixels with a 2px stroke width, rounded line caps, and rounded line joins. Icons have 1px of padding inside the viewBox meaning the actual icon content fits within a 22x22 area. This consistency is what makes all Lucide icons look perfectly matched when used together in a UI.

Question 16

Does Lucide support TypeScript?

Accepted Answer

Yes, all Lucide packages ship with full TypeScript definitions. The lucide-react package exports a LucideIcon type for the icon component, and a LucideProps interface for the props. You can use these for typed icon prop passing: import { LucideIcon } from 'lucide-react'. This makes it easy to build typed icon wrapper components or accept dynamic icon names in your design system.

Question 17

Can I pass a dynamic icon name as a variable?

Accepted Answer

Yes but you need to use a lookup approach since you cannot import icons dynamically by string name directly. Import all icons you might need and create a map object: const icons = { arrowRight: ArrowRight, check: Check }. Then look up: const Icon = icons[iconName]. Use it as a component: <Icon size={24} />. Alternatively use the lucide package with createLucideIcon or use Iconify which supports dynamic string-based icon names.

Question 18

What is the difference between Lucide and Feather Icons?

Accepted Answer

Lucide started as a community fork of Feather Icons in 2020 when Feather's development slowed down. Lucide kept the same clean stroke-based design style but added hundreds of new icons, established stricter contribution guidelines, improved consistency across the set, and created official packages for every major framework. Feather has 286 icons while Lucide has over 1700. If you are starting a new project today, Lucide is the choice.

Question 19

How do I access Lucide Icons through the Atelier API?

Accepted Answer

Generate an API key from your Atelier dashboard under Settings > API Keys. Then make a GET request to https://api.atelier.design/v1/icons?pack=lucide with your key in the x-api-key header. The API returns icon metadata including SVG URLs, tags, and categories. You can also fetch individual icon SVG markup directly from /v1/icons/lucide/{icon-name}/svg endpoint.

Question 20

Is the Lucide Icons API access free on Atelier?

Accepted Answer

Yes, Lucide Icons is a free asset on Atelier so all API requests to the Lucide pack are counted against your regular API quota. Free accounts get 100 API requests per day. Pro accounts get unlimited requests. Since Lucide is MIT licensed, there are no additional access restrictions — any valid API key can fetch any Lucide icon at any time.

Loading...

Full Description

What Makes Lucide Different

What's Included

Framework Support

Frequently Asked Questions

Love this site? Join Discord