PHPackages                             webtourismus/lucide - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. webtourismus/lucide

ActiveDrupal-library

webtourismus/lucide
===================

Mirror of https://www.npmjs.com/package/lucide-static as drupal-library.

v0.372.0(2y ago)1172↓100%ISCHTML

Since Nov 4Pushed 2y ago1 watchersCompare

[ Source](https://github.com/webtourismus/lucide)[ Packagist](https://packagist.org/packages/webtourismus/lucide)[ Docs](https://lucide.dev/docs/lucide-static)[ RSS](/packages/webtourismus-lucide/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (6)Used By (0)

Lucide Static
=============

[](#lucide-static)

This package include the following lucide implementations:

- All svg files
- Javascript library containing strings of svgs.
- Icon fonts
- Svg sprite

> What is lucide? Read it [here](https://github.com/lucide-icons/lucide#what-is-lucide).

Why lucide-static?
------------------

[](#why-lucide-static)

This package is suitable for very specific use cases for example if you want to use icon fonts, svg sprites, normal svgs or Common.js Svg strings in your javascript project.

Warning

It is not recommended to use this package for svg sprites or icon fonts for web pages/applications, for prototyping it is ok. We recommend to bundlers for web applications to make sure you only bundle the used icons from this icon library (Threeshaking). Otherwise it will load all the icons, making you webpage loading slower. Threeshaking is only available in the packages: [lucide](https://github.com/lucide-icons/lucide/tree/main/packages/lucide), [lucide-react](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-react), [lucide-vue](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-vue), [lucide-vue-next](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-vue-next), [lucide-angular](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-angular), [lucide-preact](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-preact)

Installation
------------

[](#installation)

Package Managers
----------------

[](#package-managers)

```
yarn add lucide-static
```

or

```
npm install lucide-static
```

### CDN

[](#cdn)

```

  @font-face {
    font-family: 'LucideIcons';
    src: url(https://unpkg.com/lucide-static@latest/font/Lucide.ttf) format('truetype');
  }

```

Usage
-----

[](#usage)

Checkout the [codesandbox examples](https://codesandbox.io/s/using-the-svg-sprite-lz1kk).

### SVG Files

[](#svg-files)

#### Svg file as image

[](#svg-file-as-image)

To use it in for example html:

```

```

```
.home-icon {
  background-image: url(~lucide-static/icons/home.svg);
}
```

Make sure you have the correct webpack loaders to make this work. [url-loader](https://v4.webpack.js.org/loaders/url-loader/)

#### Svg file Inline

[](#svg-file-inline)

You can simply import each svg by targeting `lucide-static/icons/{icon-name}.svg`. To use svgs in your project you can for example use a [svg loader](https://v4.webpack.js.org/loaders/svg-inline-loader/).

```
import arrowRightIcon from 'lucide-static/icons/arrow-right';

// return string of a svg
```

### SVG Sprite

[](#svg-sprite)

You may need additional loader for this.

```

...sprite svg
```

If you'd prefer, you can use CSS to hold your base SVG properties

```
.lucide-icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
```

and update the svg as follows

```

  ...sprite svg

```

### Icon Font

[](#icon-font)

```
@import ('~lucide-static/font/lucide.css');
```

```

```

### Node.js

[](#nodejs)

To use lucide icons in your Nodejs project you can import each icon as:

```
const { messageSquare } = require('lucide-static/lib');
```

> Note: Each icon name is in camelCase.

#### Example in node.js project

[](#example-in-nodejs-project)

```
const express = require('express');
const { messageSquare } = require('lucide-static/lib');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send(`

        Page Title

        Lucide Icons
        This is a lucide icon ${messageSquare}

  `);
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});
```

Contributing
------------

[](#contributing)

For more info on how to contribute please see the [contribution guidelines](https://github.com/lucide-icons/lucide/blob/main/CONTRIBUTING.md).

Caught a mistake or want to contribute to the documentation? [Edit this page on Github](https://github.com/lucide-icons/lucide/blob/main/README.md)

Community
---------

[](#community)

Join the community on our [Discord](https://discord.gg/EH6nSts) server!

License
-------

[](#license)

Lucide is totally free for commercial use and personally use, this software is licensed under the [ISC License](https://github.com/lucide-icons/lucide/blob/main/LICENSE).

###  Health Score

22

—

LowBetter than 22% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity14

Limited adoption so far

Community4

Small or concentrated contributor base

Maturity40

Maturing project, gaining track record

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~134 days

Total

5

Last Release

749d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/39328724?v=4)[webtourismus.at](/maintainers/webtourismus)[@webtourismus](https://github.com/webtourismus)

### Embed Badge

![Health badge](/badges/webtourismus-lucide/health.svg)

```
[![Health](https://phpackages.com/badges/webtourismus-lucide/health.svg)](https://phpackages.com/packages/webtourismus-lucide)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)