Chapter 126: @lucide/icons

Core Idea

@lucide/icons is a helper library that exports Lucide icon data in a tree-shakable format, also providing utilities for dynamic importing icons.

Key Concepts

• In browsers it uses btoa (with proper UTF-8 handling)
• In Node.js it falls back to Buffer
• <img src="...">
• CSS background-image
• Canvas drawing
• Inline data URLs in HTML or SVG
• The SVG is encoded as UTF-8 before base64 conversion to ensure correct handling of non-ASCII characters.
• No runtime configuration is required — the function automatically selects the appropriate encoding strategy.

Code Examples

import { House } from '@lucide/icons';
// House is icon data (not a rendered component).

• What it demonstrates: @lucide/icons usage pattern from the official Lucide docs.

Key Takeaways

1. In browsers it uses btoa (with proper UTF-8 handling)
2. In Node.js it falls back to Buffer
3. <img src="...">
4. CSS background-image
5. Canvas drawing

Connects To

• Package Reference: part of the Package Reference section of the Lucide docs.