mirror of
https://github.com/lucide-icons/lucide.git
synced 2025-12-17 23:17:41 +01:00
1.8 KiB
1.8 KiB
<script setup>
import { Sandpack } from 'sandpack-vue3'
import sandpackTheme from '../../../.vitepress/theme/sandpackTheme.json'
import combineIconsExample from './examples/combining-icons/files.ts'
import combineNotificationExample from './examples/combining-icons-notification/files.ts'
import combineCustomExample from './examples/combining-icons-custom/files.ts'
</script>
Combining icons
You can combine multiple icons into a single icon by using SVG in SVG. This is useful for if you want to be creative and make your own custom icons by combining existing icons.
This is valid SVG and all SVG properties are supported on the icons.
The x and y coordinates can be adjusted to position the icons as you like.
Caveats
When combining icons, you need to make sure that the icon you is in the viewBox of the outer icon (24x24).
With custom SVG elements
You can also use SVG elements to create your own icons.
Example with notification badge
Example with text element
You can also use the text SVG element to add text to your icon.