Chapter 2: Getting started

Core Idea

This guide will help you get started with Lucide in your Vanilla JavaScript project.

Key Concepts

• you can pass nameAttr to adjust the attribute name to replace icons (default is data-lucide).
• you can pass attrs to pass additional custom attributes, for instance CSS classes or stroke options.
• you can pass root to provide a custom DOM element the icons should be replaced in (useful when manipulating small sections of a large DOM or elements in the shadow DOM)
• you can pass inTemplates: true to also replace icons inside <template> tags.

Code Examples

<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>


<script src="https://unpkg.com/lucide@latest"></script>

• What it demonstrates: Getting started usage pattern from the official Lucide docs.

Key Takeaways

1. you can pass nameAttr to adjust the attribute name to replace icons (default is data-lucide).
2. you can pass attrs to pass additional custom attributes, for instance CSS classes or stroke options.
3. you can pass root to provide a custom DOM element the icons should be replaced in (useful when manipulating small sections of a large DOM or elements in the shadow DOM)
4. you can pass inTemplates: true to also replace icons inside <template> tags.

Connects To

• Vanilla JS (core): part of the Vanilla JS (core) section of the Lucide docs.
• Lucide for Vanilla JavaScript: overview page for this section.