Halo アイコン
thesvg-color:halo
Halo アイコン(thesvg-color:halo)は、theSVG Color セットの無料 SVG アイコンです（作者: thesvg.org）。 2144 × 877 のグリッドで描かれています。 theSVG Color icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
- アイコンセット
- theSVG Color
- 作者
- thesvg.org
- ライセンス
- MIT
- サイズ
- 2144 × 877
SVG コード
<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>Halo アイコンの使い方
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 コンポーネント
<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 画像
<img src="https://iconyz.com/api/public/svg/thesvg-color/halo.svg" alt="Halo アイコン" width="24" height="24">他のアイコンセットの Halo アイコン
Halo アイコン のよくある質問
Halo アイコンは商用利用でも無料ですか?
はい。theSVG Color icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Halo アイコンを使うには?
@iconify/react をインストールして <Icon icon="thesvg-color:halo" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Halo アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/thesvg-color/halo.svg" alt="Halo アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。