Halo icon
thesvg-color:halo
The Halo icon (thesvg-color:halo) is a free SVG icon from the theSVG Color set by thesvg.org. It is drawn on a 2144 × 877 grid. theSVG Color 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
- theSVG Color
- Author
- thesvg.org
- License
- MIT
- Size
- 2144 × 877
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="2144" height="877" viewBox="0 0 2144 877"><linearGradient id="SVGXCcGtcFf" x1="0" x2="1" y1="0" y2="0" gradientTransform="rotate(-90 1092.099 -216.701)scale(848.921)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0050b5"/><stop offset="1" stop-color="#0b87fd"/></linearGradient><linearGradient id="SVG3y0o1dkO" x1="0" x2="1" y1="0" y2="0" gradientTransform="matrix(0 472.459 -473.895 0 587.63 0)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0048af"/><stop offset="1" stop-color="#003580"/></linearGradient><linearGradient id="SVG7AgyBdbr" x1="0" x2="1" y1="0" y2="0" gradientTransform="matrix(0 898.506 -901.236 0 162.222 -12.58)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0b89ff"/><stop offset="1" stop-color="#004eb2"/></linearGradient><g fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><g fill="url(#SVGXCcGtcFf)"><path d="M1028.16 339.331c148.249 0 268.609 120.36 268.609 268.609s-120.36 268.608-268.609 268.608S759.552 756.189 759.552 607.94s120.359-268.609 268.608-268.609m0 119.152c82.488 0 149.457 66.969 149.457 149.457c0 82.487-66.969 149.456-149.457 149.456c-82.487 0-149.456-66.969-149.456-149.456c0-82.488 66.969-149.457 149.456-149.457m846.42-119.152c148.249 0 268.608 120.36 268.608 268.609s-120.359 268.608-268.608 268.608s-268.609-120.359-268.609-268.608s120.36-268.609 268.609-268.609m0 119.152c82.487 0 149.456 66.969 149.456 149.457c0 82.487-66.969 149.456-149.456 149.456c-82.488 0-149.457-66.969-149.457-149.456c0-82.488 66.969-149.457 149.457-149.457"/><path d="M1309.27 377.585c0-10.083-7.222-18.719-17.146-20.504l-74.172-13.34a20.836 20.836 0 0 0-24.521 20.505v491.469a20.833 20.833 0 0 0 20.833 20.833h74.173a20.833 20.833 0 0 0 20.833-20.833z"/><path fill-rule="nonzero" d="M1542.59 72.033a31.247 31.247 0 0 0-31.25-31.25h-80.477a31.25 31.25 0 0 0-31.25 31.25v773.265a31.25 31.25 0 0 0 31.25 31.25h80.477a31.247 31.247 0 0 0 31.25-31.25z"/></g><path fill="url(#SVG3y0o1dkO)" fill-rule="nonzero" d="M506.409 822.063a52.024 52.024 0 0 0 52.119 52.027l58.369-.105c28.696-.052 51.932-23.329 51.932-52.026V52.373A52.026 52.026 0 0 0 616.803.347h-58.368a52.026 52.026 0 0 0-52.026 52.026z"/><path fill="#0051b0" fill-rule="nonzero" d="M616.746 322.662a52.084 52.084 0 0 1 52.083 52.084v447.062a52.086 52.086 0 0 1-52.083 52.084h-58.254a52.084 52.084 0 0 1-52.083-52.084V566.425a52.08 52.08 0 0 0-52.083-52.083H0v-191.68z"/><path fill="url(#SVG7AgyBdbr)" fill-rule="nonzero" d="M0 822.101a52.03 52.03 0 0 0 52.137 52.026l58.368-.124c28.69-.062 51.916-23.337 51.916-52.027V52.262c0-28.69-23.226-51.965-51.916-52.026L52.137.111A52.03 52.03 0 0 0 0 52.137z"/></g></svg>How to use the Halo icon
React
import { Icon } from "@iconify/react";
<Icon icon="thesvg-color:halo" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="thesvg-color:halo" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="thesvg-color:halo" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--halo]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:halo"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="thesvg-color:halo"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/thesvg-color/halo.svg" alt="Halo icon" width="24" height="24">Halo icon in other icon sets
Halo icon FAQ
Is the Halo icon free for commercial use?
Yes. theSVG Color icons are released under the MIT license, which allows use in personal and commercial projects.
How do I use the Halo icon in React?
Install @iconify/react and render <Icon icon="thesvg-color:halo" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Halo icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/thesvg-color/halo.svg" alt="Halo icon">, or paste the SVG code inline to style it with CSS.