---
title: Combining icons - Vue
description: Learn how to combine multiple icons into a single icon nested SVG elements in your Vue application.
---
<script setup>
import Sandpack from '~/.vitepress/theme/components/editors/SandpackVue.vue'
</script>

# Combining icons

You can combine multiple icons into a single icon by nesting SVG elements.
This is useful if you want to create custom icons by combining existing ones.

::: sandpack {template=vue showTabs=false editorHeight=400 editorWidthPercentage=60 dependencies="@lucide/vue"}

```vue src/App.vue [active]
<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>

```

:::

This is valid, since [SVGs can be nested](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/svg#nested_svg_element), and all SVG properties are supported on the icons.
The `x` and `y` coordinates can be adjusted to position the icons as you like.

::: info Limitation
When combining icons, you need to make sure that the `x` and `y` coordinates are within the `viewBox` of the outer icon (24x24).
:::

## With native SVG elements

You can also combine Lucide icons with native SVG elements to build custom icon variations.

### Example with notification badge

For example, you can add a notification badge to an icon by using the `circle` SVG element.

::: sandpack {template=vue showTabs=false editorHeight=480 editorWidthPercentage=60 dependencies="@lucide/vue"}

```vue src/App.vue [active]
<script setup>
import { Mail } from "@lucide/vue";

const hasUnreadMessages = true;
</script>

<template>
  <div class="app">
    <Mail :size="48">
      <circle
        v-if="hasUnreadMessages"
        r="3"
        cx="21"
        cy="5"
        stroke="none"
        fill="#F56565"
      />
    </Mail>
  </div>
</template>

```

:::

### Example with text element

You can also use the `text` SVG element to add text to your icon.

::: sandpack {template=vue showTabs=false editorHeight=400 editorWidthPercentage=60 dependencies="@lucide/vue"}

```vue src/App.vue [active]
<script setup>
import { File } from "@lucide/vue";
</script>

<template>
  <div class="app">
    <File :size="48">
      <text
        x="7.5"
        y="19"
        font-size="8"
        font-family="Verdana,sans-serif"
        :stroke-width="1"
      >
        JS
      </text>
    </File>
  </div>
</template>

```

:::
