Sparkles Fill icon
keyline-icons:sparkles-fill
The Sparkles Fill icon (keyline-icons:sparkles-fill) is a free SVG icon from the Keyline Icons set. It is drawn on a 24 × 24 grid. Keyline Icons are released under the MIT license, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.
- Icon set
- Keyline Icons
- Author
- Keyline Icons
- License
- MIT
- Size
- 24 × 24
- Tags
- sparklesfill, sparkle
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M16.3954 8.8125L17.6711 12.0472C17.722 12.176 17.824 12.278 17.9528 12.3289L21.1875 13.6046C21.7606 13.8306 22.1372 14.384 22.1372 15C22.1372 15.616 21.7606 16.1694 21.1875 16.3954L17.9528 17.6711C17.824 17.722 17.722 17.824 17.6711 17.9528L16.3954 21.1875C16.1694 21.7606 15.616 22.1372 15 22.1372C14.384 22.1372 13.8306 21.7606 13.6046 21.1875L12.3289 17.9528C12.278 17.824 12.176 17.722 12.0472 17.6711L8.8125 16.3954C8.2394 16.1694 7.8628 15.616 7.8628 15C7.8628 14.384 8.2394 13.8306 8.8125 13.6046L12.0472 12.3289C12.176 12.278 12.278 12.176 12.3289 12.0472L13.6046 8.8125C13.8306 8.2394 14.384 7.8628 15 7.8628C15.616 7.8628 16.1694 8.2394 16.3954 8.8125ZM7.6454 2.8125L8.1433 4.075C8.1941 4.2038 8.2962 4.3059 8.425 4.3567L9.6875 4.8546C10.2606 5.0806 10.6372 5.634 10.6372 6.25C10.6372 6.866 10.2606 7.4194 9.6875 7.6454L8.425 8.1433C8.2962 8.1941 8.1941 8.2962 8.1433 8.425L7.6454 9.6875C7.4194 10.2606 6.866 10.6372 6.25 10.6372C5.634 10.6372 5.0806 10.2606 4.8546 9.6875L4.3567 8.425C4.3059 8.2962 4.2038 8.1941 4.075 8.1433L2.8125 7.6454C2.2394 7.4194 1.8628 6.866 1.8628 6.25C1.8628 5.634 2.2394 5.0806 2.8125 4.8546L4.075 4.3567C4.2038 4.3059 4.3059 4.2038 4.3567 4.075L4.8546 2.8125C5.0806 2.2394 5.634 1.8628 6.25 1.8628C6.866 1.8628 7.4194 2.2394 7.6454 2.8125Z"/></svg>
How to use the Sparkles Fill icon
React
import { Icon } from "@iconify/react";
<Icon icon="keyline-icons:sparkles-fill" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="keyline-icons:sparkles-fill" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="keyline-icons:sparkles-fill" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[keyline-icons--sparkles-fill]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/keyline-icons -->
<div class="i-keyline-icons:sparkles-fill"></div>
Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="keyline-icons:sparkles-fill"></iconify-icon>
HTML image
<img src="https://iconyz.com/api/public/svg/keyline-icons/sparkles-fill.svg" alt="Sparkles Fill icon" width="24" height="24">
Related icons in Keyline Icons
Sparkles Fill icon in other icon sets
Sparkles Fill icon FAQ
Is the Sparkles Fill icon free for commercial use?
Yes. Keyline Icons are released under the MIT license, which allows use in personal and commercial projects.
How do I use the Sparkles Fill icon in React?
Install @iconify/react and render <Icon icon="keyline-icons:sparkles-fill" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Sparkles Fill icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/keyline-icons/sparkles-fill.svg" alt="Sparkles Fill icon">, or paste the SVG code inline to style it with CSS.
Browse all Keyline Icons →
ICONYZ
