Vis Background アイコン

Q: Vis Background アイコンは商用利用でも無料ですか?

はい。Web3 Icons Branded icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。

token-branded:vis-background

Vis Background アイコン(token-branded:vis-background)は、Web3 Icons Branded セットの無料 SVG アイコンです（作者: 0xa3k5）。 24 × 24 のグリッドで描かれています。 Web3 Icons Branded icons は MIT ライセンスで公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。

アイコンセット: Web3 Icons Branded
作者: 0xa3k5
ライセンス: MIT
サイズ: 24 × 24
タグ: visbackground

SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none"><g clip-path="url(#SVGHcSWxdhd)"><path fill="#fff" d="M24 0H0v24h24z"/><path fill="url(#SVGRz4IWbaF)" d="M12 17.648a5.647 5.647 0 1 0 0-11.294a5.647 5.647 0 0 0 0 11.294"/><path fill="url(#SVG6SfSyejg)" fill-rule="evenodd" d="m7.322 11.492l1.36-1.812a.05.05 0 0 0-.004-.061l-.175-.174a.047.047 0 0 1 0-.066l1.365-1.365A.05.05 0 0 1 9.901 8h.668a.05.05 0 0 0 .033-.01l1.257-1.049c.037-.028.094.01.07.057l-.39.974a.05.05 0 0 0 .01.047c.084.104.216.344.216.687c0 .47 0 .941-.236 1.177c-.178.178-.753.353-1.322.531l-.546.17a.05.05 0 0 0-.023.018l-.448.669a.05.05 0 0 0 0 .047l.208.419a.05.05 0 0 1-.01.052l-.659.658a.05.05 0 0 1-.056 0l-1.337-.894a.05.05 0 0 1-.014-.061m1.62-2.08l.234.235l.236-.47zm2.258 4.25l5.035-6.132l1.412 2.117l-5.355 3.793c.188.043.376.123.527.236l4.828-2.852v1.882l-4.362 1.53c.06.14.108.296.122.46l3.765-1.049v1.647h-3.84a1.4 1.4 0 0 1-.283.476l3.657.23l-.706.706l-3.238-.692l-.127.07l2.188 1.093l-.94.235l-2.118-1.177l.037-.014a1.413 1.413 0 0 1-.602-2.56m1.741 1.162a.942.942 0 1 1-1.883 0a.942.942 0 0 1 1.883 0m-2.588.235L9.176 16.47l1.883.94h2.117c-.211-.14-.517-.296-.856-.47c-.414-.211-.875-.447-1.261-.706a1.55 1.55 0 0 1-.706-1.176m.235-.941l3.294-4.235L12 8.706c0 .626-.33 1.93-1.647 2.118c.235.86.235 2.588.235 3.294M12 15.294a.47.47 0 1 0 0-.94a.47.47 0 0 0 0 .94" clip-rule="evenodd"/><path fill="#7a4500" d="m7.158 12.96l.207 1.096l.645-1.097h.329l-.842 1.38H7.12l-.296-1.38zm1.685 0l-.278 1.378h-.31l.272-1.379zm.616 1.392a.73.73 0 0 1-.381-.094a.3.3 0 0 1-.146-.315h.32a.15.15 0 0 0 .047.136a.27.27 0 0 0 .174.052a.33.33 0 0 0 .179-.042a.14.14 0 0 0 .066-.123q0-.069-.07-.117a1 1 0 0 0-.213-.095a2 2 0 0 1-.216-.094a.4.4 0 0 1-.141-.113a.3.3 0 0 1-.057-.188q0-.129.071-.22a.46.46 0 0 1 .207-.147a.8.8 0 0 1 .296-.052c.109 0 .208.02.283.048a.4.4 0 0 1 .188.14a.3.3 0 0 1 .047.208h-.33v-.024a.12.12 0 0 0-.051-.108a.24.24 0 0 0-.15-.042a.3.3 0 0 0-.17.047a.14.14 0 0 0-.066.117q.001.05.038.085a.3.3 0 0 0 .094.066l.15.066l.217.094a.5.5 0 0 1 .141.122a.28.28 0 0 1 .061.188a.33.33 0 0 1-.075.208a.47.47 0 0 1-.202.146a.9.9 0 0 1-.306.051z"/><path fill="url(#SVGyEqGGdNa)" fill-rule="evenodd" d="M12 17.647a5.646 5.646 0 1 0 0-11.293a5.646 5.646 0 0 0 0 11.293M12 20a8 8 0 1 0 0-16a8 8 0 0 0 0 16" clip-rule="evenodd"/><path fill="url(#SVGZTDNlgLh)" fill-rule="evenodd" d="M17.882 12a5.882 5.882 0 1 1-11.764 0a5.882 5.882 0 0 1 11.764 0M12 19.765a7.764 7.764 0 1 0 0-15.53a7.764 7.764 0 0 0 0 15.53M17.647 12a5.647 5.647 0 1 1-11.294 0a5.647 5.647 0 0 1 11.294 0M20 12a8 8 0 1 1-16 0a8 8 0 0 1 16 0" clip-rule="evenodd"/></g><defs><linearGradient id="SVGRz4IWbaF" x1="12" x2="12" y1="4.001" y2="20.001" gradientUnits="userSpaceOnUse"><stop stop-color="#f0d242"/><stop offset=".2" stop-color="#fef76f"/><stop offset=".54" stop-color="#e1af1b"/><stop offset="1" stop-color="#c27800"/></linearGradient><linearGradient id="SVG6SfSyejg" x1="11.997" x2="11.997" y1="4.001" y2="20" gradientUnits="userSpaceOnUse"><stop stop-color="#b76a00"/><stop offset="1" stop-color="#603800"/></linearGradient><linearGradient id="SVGyEqGGdNa" x1="12" x2="12" y1="4" y2="20" gradientUnits="userSpaceOnUse"><stop stop-color="#c68a00"/><stop offset=".53" stop-color="#fcf571"/><stop offset="1" stop-color="#b27801"/></linearGradient><linearGradient id="SVGZTDNlgLh" x1="12" x2="12" y1="4" y2="20" gradientUnits="userSpaceOnUse"><stop stop-color="#ae714d"/><stop offset=".17" stop-color="#823300"/><stop offset=".53" stop-color="#f6ec27"/><stop offset="1" stop-color="#e4b000"/></linearGradient><clipPath id="SVGHcSWxdhd"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg>

Vis Background アイコンの使い方

React

import { Icon } from "@iconify/react";

<Icon icon="token-branded:vis-background" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="token-branded:vis-background" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="token-branded:vis-background" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[token-branded--vis-background]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/token-branded -->
<div class="i-token-branded:vis-background"></div>

Web コンポーネント

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="token-branded:vis-background"></iconify-icon>

HTML 画像

<img src="https://iconyz.com/api/public/svg/token-branded/vis-background.svg" alt="Vis Background アイコン" width="24" height="24">

Web3 Icons Branded の関連アイコン

Vis Background アイコンのよくある質問

Vis Background アイコンは商用利用でも無料ですか?

はい。Web3 Icons Branded icons は MIT ライセンスで公開されており、個人・商用プロジェクトで利用できます。

React で Vis Background アイコンを使うには?

@iconify/react をインストールして <Icon icon="token-branded:vis-background" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。

Vis Background アイコンをウェブページに追加するには?

画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/token-branded/vis-background.svg" alt="Vis Background アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。

Web3 Icons Branded アイコンをすべて見る →