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=vite-svelte showTabs=false editorHeight=400 editorWidthPercentage=60}

<script>
import Scan from '@lucide/svelte/icons/scan';
import User from '@lucide/svelte/icons/user';
</script>

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

:::

This is valid, since SVGs can be nested, 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=vite-svelte showTabs=false editorHeight=480 editorWidthPercentage=60}

<script>
import Mail from '@lucide/svelte/icons/mail';

const hasUnreadMessages = true;
</script>

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

:::

Example with text element

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

::: sandpack {template=vite-svelte showTabs=false editorHeight=400 editorWidthPercentage=60}

<script>
import File from '@lucide/svelte/icons/file';
</script>

<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>

:::