mirror of https://github.com/lucide-icons/lucide.git synced 2026-09-02 16:19:22 +02:00

Files

Eric Fennis 484f2c9cd3 docs(version-1): Version 1 website (#4142 )

* Update images

* Adjust color

* update accessebility

* Add matrix hero

* Add typescript documentation

* Add basics section to vue pages

* Add svelte docs

* Fix dynamic sidebar

* Add animation?

* Some adjustments

* Adjust animation

* Updates docs

* Add scaledown animation

* Add docs for vue types

* Fix layout accessibility page

* fix framework select

* adjust easing home animation

* Write docs for Vue

* Adjust animation home

* Adjust home hero animation

* Finish svelte docs

* Add solid pages

* remove spiral animation component

* Add group icons

* Added solid docs

* update preact docs

* Adjust examples preact docs

* Add snackplayer

* Get new editor

* Save this

* Add examples

* Adjust styling

* setup custom sandpack

* Add script

* Format files

* Make sandpack plugin work

* migrate react docs

* Fix svelte and solid examples

* Migrate to solid packages

* Add darkmode package logos

* Fix bug in selector

* migrate vue examples

* migrate advanced vue items

* migrate preact and svelte examples

* Add astro docs

* adding more docs on guide for lucide library

* Fix home animation

* Cleanup

* Added resources page, with more details and content

* Add hero badge for Version 1

* Fix vercel json

* Update missing paths

* Fix build?

* Replace lucide-vue-next

* Fix build

* Add some docs

* update markdown

* Setup angular docs

* Add basic angular docs

* Adjust code examples

* Update title and descriptions

* Update accessibility link

* Update title and description

* Add og image

* Fix alignment

* Add migration guides

* Adjust version 1 markdown file

* Add migration guide to the main list

* Minor fixes

* Update docs

* Apply feedback

* Select icons

* Add pointer events none

* Fix package links homepage

* Format code

* Fix types

* Fix focus

* Fix build

* Fix focus

* Apply feedback

* Adjust imports

* Adjust imports

* Fix search

* Apply feedback

* Fix import in font docs

* Small fixes

* docs(guide): added easter egg icon. stay tuned, guys 😉

* Add llm txt plugin

* Adjust logo top

* docs(version-1): upgraded @lucide/angular guide for v1 website (#4144)

* docs(guide/angular): rewrite some angular documentation

* docs(guide/angular): extens angular guide with combining icons & icon provider guides

* docs(guide/angular): fix angular sandbox, still needs @lucide/angular release tho

* docs(guide/angular): rework the getting started page a bit more, refactor some more prop=>input occurences

* docs(guide/angular): context provider => provideLucideConfig

* Update docs/guide/angular/migration.md

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>

* Update docs/guide/angular/advanced/combining-icons.md

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>

* Apply suggestions from code review

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

* docs(guide/angular): rework a11y for better flow & pacing

* docs(guide/angular): salvage original phrase, it has better flow

* docs(guide/angular): some more a11y nitpicking

* docs(guide/angular): reduce llm fatigue

* docs(guides/angular): fix app component selector

* docs(guides/angular): fix angular sandpacks

* Add sandpack angular to improve tree-shakable stack

* Update docs/guide/angular/getting-started.md

* docs(guides/angular): fix user import in combinding icons guide

* docs(guides/angular): fix nested SVG phrasing

* Update docs/guide/angular/advanced/with-lucide-lab.md

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update docs/guide/angular/advanced/filled-icons.md

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* docs(guides/angular): fix createLucideIcon guide

* docs(guides/angular): upgrade all relevant angular sandpack demos

---------

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

* fix(docs): add autogenerated OG images to gitignore

* fix(docs): unify the case of "Lucide" & "Lucide Lab" over all docs and readmes

* Fix build

* Add next tag to all installation guides

* Add top bar notification

* Minor fixes

* Update text

* Add todos

* Update og image

* Adjust install command

* Color top bar

* fix(docs): ignore all OG images, expect general.png

* fix(docs): fix the package list, hide @lucide/icons, downgrade angular logo, link to v0 guide, fix package title alignment

* Update docs/.vitepress/theme/components/base/LayoutTop.vue

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update docs/guide/react/advanced/dynamic-icon-component.md

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update CONTRIBUTING.md

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update docs/.vitepress/sidebar/resources.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Fix code example

* fix(docs): version 1 => Version 1

* feat(docs): add angular to new features in v1

* Fix next line issue

* feat(docs): fix typo (code example_s_)

* Fix deadlink

* feat(docs): fix some more typos and irky grammar

* feat(docs): fix lowercase lucide in sidebar 😅

* Update docs/guide/version-1.md

Co-authored-by: Karsa <contact@karsa.org>

---------

Co-authored-by: Karsa <contact@karsa.org>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

2026-03-20 17:04:28 +01:00

2.0 KiB

Raw Permalink Blame History

description, nextPage

description

Using the web font version of Lucide icons in your project. Learn how to include the stylesheet and use the icons with CSS classes.

getting-started

Icon Font

Lucide icons are also available as a web font. The font includes all icons as glyphs, allowing you to use them in your project with CSS classes. This can be a convenient option for projects that prefer using icon fonts.

:::warning Not recommended for high traffic production use The Icon font includes all icons, which can significantly increase your app's bundle size and load time. For production environments, we recommend using a bundler with tree-shaking support to include only the icons you actually use. Consider using one of the framework-specific packages. :::

Using the CSS Stylesheet

::: code-group

@import 'lucide-static/font/lucide.css';

@import "~lucide-static/font/lucide.css";

<link rel="stylesheet" href="https://unpkg.com/lucide-static@latest/font/lucide.css" />

<link rel="stylesheet" href="/your/path/to/lucide.css" />

:::

Using the Icon Font

Once you have included the stylesheet, you can use the icons in your HTML by applying the appropriate CSS classes. Each icon has a corresponding class name that you can use to display it.

For example, to display the "home" icon, you would use the following HTML:

<div class="icon-house"></div>

Example with JavaScript

::: sandpack {template=vanilla showTabs=false editorHeight=480 editorWidthPercentage=60 dependencies="lucide-static"}

<!DOCTYPE html>
<html>
  <body>
    <i class="icon-home"></i>

    <script src="index.js"></script>
  </body>
</html>

import "./styles.css";
import "lucide-static/font/lucide.css";

:::

2.0 KiB Raw Permalink Blame History

Icon Font

Using the CSS Stylesheet

Using the Icon Font

Example with JavaScript

2.0 KiB

Raw Permalink Blame History