Chapter 40: Combining icons

Core Idea

Learn how to combine multiple icons into a single icon nested SVG elements in your Vue application.

Key Concepts

• With native SVG elements

Code Examples

<script setup>
import { Scan, User } from "@lucide/vue";
</script>

<template>
  <div class="app">
    <Scan :size="48">
      <User
        :size="12"
        x="6"
        y="6"
        absoluteStrokeWidth
      />
    </Scan>
  </div>
</template>

• What it demonstrates: Combining icons usage pattern from the official Lucide docs.

Key Takeaways

1. With native SVG elements

Connects To

• Vue: part of the Vue section of the Lucide docs.
• Lucide for Vue: overview page for this section.