Capítulo 5 de 147

Chapter 5: Sizing

Core Idea

Learn how to adjust the size of Lucide icons in your Vanilla JavaScript applications using the width and height attributes and CSS.

Key Concepts

  • Adjusting the icon size using the width and height attribute
  • Adjusting the icon size via CSS

Code Examples

<!DOCTYPE html>
<html>
  <body>
    <i data-lucide="landmark" width="64" height="64"></i>

    <script src="index.js">
    </script>
  </body>
</html>
  • What it demonstrates: Sizing usage pattern from the official Lucide docs.

Key Takeaways

  1. Adjusting the icon size using the width and height attribute
  2. Adjusting the icon size via CSS

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.
AnteriorChapter 4: ColorPróximoChapter 6: Stroke width