lucide

New icons 🎨

• chart-gantt (#2392) by @jguddas

Modified Icons 🔨

• contact-round (#2391) by @jguddas
• contact (#2391) by @jguddas

Implementation of the <Icon /> component which makes it easier to create (custom) icons from iconNodes.
This will be useful for external packages like @lucide/lab and more.

Example with lucide-react

import { burger } from '@lucide/lab';
import { Icon } from 'lucide-react';

<Icon iconNode={burger} /> // Renders burger icon

See the docs

• Lucide
• Lucide React
• Lucide Vue
• Lucide Svelte
• Lucide Angular
• Lucide Solid
• Lucide React Native

New icons 🎨

• alarm-smoke (#1392) by @danielbayley
• bell-electric (#1392) by @danielbayley
• cctv (#1392) by @danielbayley
• fire-extinguisher (#1392) by @danielbayley
• pointer-off (#1567) by @jguddas

New icons 🎨

• user-round-search (#1620) by @jmsv
• user-search (#1620) by @jmsv

New icons 🎨

• power-circle (#1353) by @danielbayley
• power-square (#1353) by @danielbayley

Optimized Icons 🔨

• armchair (#1610) by @jguddas
• folder-archive (#1223) by @jguddas
• folder-check (#1223) by @jguddas
• folder-clock (#1223) by @jguddas
• folder-closed (#1223) by @jguddas
• folder-cog (#1223) by @jguddas
• folder-down (#1223) by @jguddas
• folder-edit (#1223) by @jguddas
• folder-git (#1223) by @jguddas
• folder-heart (#1223) by @jguddas
• folder-input (#1223) by @jguddas
• folder-key (#1223) by @jguddas
• folder-lock (#1223) by @jguddas
• folder-minus (#1223) by @jguddas
• folder-open (#1223) by @jguddas
• folder-plus (#1223) by @jguddas
• folder-search-2 (#1223) by @jguddas
• folder-search (#1223) by @jguddas
• folder-tree (#1223) by @jguddas
• folder-up (#1223) by @jguddas
• folder-x (#1223) by @jguddas
• folder (#1223) by @jguddas
• folders (#1223) by @jguddas
• power (#1353) by @danielbayley

New icons 🎨

• image-down (#1570) by @jguddas
• map-pinned (#1390) by @danielbayley
• route-off (#1390) by @danielbayley
• route (#1390) by @danielbayley
• signpost-big (#1390) by @danielbayley
• signpost (#1390) by @danielbayley
• waypoints (#1390) by @danielbayley

New icons 🎨

• blocks (#1055) by @danielbayley
• bus-front (#1412) by @danielbayley
• cable-car (#1412) by @danielbayley
• car-front (#1412) by @danielbayley
• car-taxi-front (#1412) by @danielbayley
• grid-2x2 (#1055) by @danielbayley
• grid-3x3 (#1055) by @danielbayley
• m-square (#1412) by @danielbayley
• parking-meter (#1412) by @danielbayley
• rail-symbol (#1412) by @danielbayley
• ship-wheel (#1412) by @danielbayley
• tractor (#1412) by @danielbayley
• traffic-cone (#1412) by @danielbayley
• train-front-tunnel (#1412) by @danielbayley
• train-front (#1412) by @danielbayley
• train-track (#1412) by @danielbayley

Modified Icons 🔨

• bus (#1412) by @danielbayley
• car (#1412) by @danielbayley
• truck (#1412) by @danielbayley

Lucide React Changes

Reverted changes to use .mjs modules, this caused issues in some Nodejs environments.
See: #1446 #1457

New icons 🎨

• fish-symbol (#1234) by @danielbayley
• paw-print (#1234) by @danielbayley
• rabbit (#1234) by @danielbayley
• shell (#1234) by @danielbayley
• snail (#1234) by @danielbayley
• turtle (#1234) by @danielbayley

What's Changed

• Fix imports pointing to non-existent files by @alexbacanu in https://github.com/lucide-icons/lucide/pull/1452

Lucide React Updates (dynamicIconImports)

Due to startup problems with build engines like ESBuild (e.g. Remix and Vite). We move to a different way of importing the dynamicIconImports. It's now in a separate entry module so compilers won't compile all dynamic imports when loading lucide-react. See #1437

Updated example from v0.260.0

import dynamic from 'next/dynamic'
- import { dynamicIconImports, LucideProps } from 'lucide-react';
+ import { LucideProps } from 'lucide-react';
+ import dynamicIconImports from 'lucide-react/dynamicIconImports';

interface IconProps extends LucideProps {
  name: keyof typeof dynamicIconImports;
}

const Icon = ({ name, color, size }: IconProps) => {
  const LucideIcon = dynamic(dynamicIconImports[name])

  return <LucideIcon color={color} size={size} />;
};

export default Icon;

New icons 🎨

• boom-box (#1249) by @danielbayley
• bring-to-front (#1425) by @james-yeoman
• pencil-line (#1286) by @danielbayley
• pencil-ruler (#1286) by @danielbayley
• send-horizonal (#1411) by @danielbayley
• send-to-back (#1425) by @james-yeoman

Modified Icons 🔨

• pencil (#1286) by @danielbayley
• send (#1411) by @danielbayley

Lucide React Update

Improves Typescript types

Improves Typescript types export by switching to rollup-plugin-dts for types generation.

Closes #1420 and #1373

Added JS Docs

When hovering (in an IDE that supports it) over a Lucide component you get a JSDoc comment with useful information about the Lucide Icons component. It also shows a small preview of the icons you imported with the link to the lucide website.

Dynamic Imports Map (experimental)

Addition to #1373 (closed).

Lucide react now exposes a dynamic import map dynamicIconImports. Useful for applications that want to show icons dynamically by icon name. For example when using a content management system with where icon names are stored in a database.

More info in docs

Example component with NextJS:

import dynamic from 'next/dynamic'
import { dynamicIconImports, LucideProps } from 'lucide-react';

interface IconProps extends LucideProps {
  name: keyof typeof dynamicIconImports;
}

const Icon = ({ name, color, size }: IconProps) => {
  const LucideIcon = dynamic(dynamicIconImports[name])

  return <LucideIcon color={color} size={size} />;
};

export default Icon;

Using the Icon Component

These features will be added later to other packages.

import Icon from './Icon';

const App = () => {
  return <Icon name="home" />;
};

export default App;

New icons 🎨

• gauge-circle (#1256) by @danielbayley

Modified Icons 🔨

• minus-circle (#1381) by @danielbayley
• minus-square (#1381) by @danielbayley
• minus (#1381) by @danielbayley
• plus-circle (#1381) by @danielbayley
• plus-square (#1381) by @danielbayley
• plus (#1381) by @danielbayley
• square (#1381) by @danielbayley

New icons 🎨

• chevron-down-circle (#1355) by @danielbayley
• chevron-left-circle (#1355) by @danielbayley
• chevron-right-circle (#1355) by @danielbayley
• chevron-up-circle (#1355) by @danielbayley

Optimized Icons 🔨

• chevron-down-square (#1355) by @danielbayley
• chevron-down (#1355) by @danielbayley
• chevron-first (#1355) by @danielbayley
• chevron-last (#1355) by @danielbayley
• chevron-left-square (#1355) by @danielbayley
• chevron-left (#1355) by @danielbayley
• chevron-right-square (#1355) by @danielbayley
• chevron-right (#1355) by @danielbayley
• chevron-up-square (#1355) by @danielbayley
• chevron-up (#1355) by @danielbayley
• chevrons-down (#1355) by @danielbayley
• chevrons-left (#1355) by @danielbayley
• chevrons-right (#1355) by @danielbayley
• chevrons-up (#1355) by @danielbayley

@ generate:changelog /home/runner/work/lucide/lucide
node ./scripts/generateChangelog.mjs "--old-tag=v0.256.1"

New icons 🎨

• table-properties (#1391) by @danielbayley

Modified Icons 🔨

• table (#1391) by @danielbayley

What's Changed

• Add Svelte support by @softwarecurator and @ericfennis in https://github.com/lucide-icons/lucide/pull/1414

Full Changelog: https://github.com/lucide-icons/lucide/compare/v0.256.0...v0.256.1

@ generate:changelog /home/runner/work/lucide/lucide
node ./scripts/generateChangelog.mjs "--old-tag=v0.255.0"

New icons 🎨

• tally-1 (#1244) by @danielbayley
• tally-2 (#1244) by @danielbayley
• tally-3 (#1244) by @danielbayley
• tally-4 (#1244) by @danielbayley
• tally-5 (#1244) by @danielbayley

@ generate:changelog /home/runner/work/lucide/lucide
node ./scripts/generateChangelog.mjs "--old-tag=v0.254.0"

New icons 🎨

• arrows-up-from-line (#1372) by @danielbayley
• container (#1372) by @danielbayley

@ generate:changelog /home/runner/work/lucide/lucide
node ./scripts/generateChangelog.mjs "--old-tag=v0.253.0"

New icons 🎨

• area-chart (#1376) by @nstokoe

@ generate:changelog /home/runner/work/lucide/lucide
node ./scripts/generateChangelog.mjs "--old-tag=v0.252.0"

New icons 🎨

• gallery-horizontal-end (#1389) by @danielbayley
• gallery-horizontal (#1389) by @danielbayley
• gallery-thumbnails (#1389) by @danielbayley
• gallery-vertical-end (#1389) by @danielbayley
• gallery-vertical (#1389) by @danielbayley

Modified Icons 🔨

• gem (#1305) by @danielbayley

@ generate:changelog /home/runner/work/lucide/lucide
node ./scripts/generateChangelog.mjs "--old-tag=v0.251.0"

New icons 🎨

• wallet-2 (#1332) by @danielbayley
• wallet-cards (#1332) by @danielbayley

Modified Icons 🔨

• wallet (#1332) by @danielbayley

@ generate:changelog /home/runner/work/lucide/lucide
node ./scripts/generateChangelog.mjs "--old-tag=v0.250.0"

New icons 🎨

• cassette-tape (#1248) by @danielbayley
• videotape (#1248) by @danielbayley