Slim Background アイコン
token-branded:slim-background
Slim Background アイコン(token-branded:slim-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
- タグ
- slimbackground
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(#SVGgf19qSBM)" d="m11.992 9.92l1.31-1.297l-1.319-1.297l-1.322 1.306l6.813 6.736L12.716 20h-1.507l-4.683-4.632l3.365-3.338l2.03 2.012l-1.395 1.326L12 16.633l1.263-1.264l-1.343-1.326l-2.025-2.012l-3.369-3.398L11.21 4h1.507l4.758 4.632l-3.369 3.393z"/><path fill="url(#SVG9Jpjpbdr)" d="m11.209 4l4.749 4.632h1.516L12.716 4z"/><path fill="url(#SVGxR8NXCGp)" d="M17.474 8.63h-1.512l-2.665 2.59l.808.804z"/><path fill="url(#SVGjz69ddtq)" d="m13.069 17.537l2.299-2.169h2.105L12.715 20l-4.572-4.632h2.593z"/><path fill="url(#SVGPOzUSdVc)" d="m8.143 15.368l2.56-2.526l1.217 1.2l-1.184 1.326z"/><path fill="url(#SVGiwRkpnYD)" d="m8.741 8.63l6.628 6.738h2.105l-5.482-5.449a60 60 0 0 1-1.213-1.288H8.741"/><path fill="url(#SVGVaXIrnBb)" d="m14.106 12.026l1.499-1.5l-2.37-1.852l-1.243 1.246z"/><path fill="url(#SVGpfamkcXG)" d="m9.89 12.03l-2.404 2.4l3.25.938l1.183-1.326z"/><path fill="url(#SVG3JqhpcHl)" d="m11.057 6.438l.926.888l-1.208 1.305h-2.03z"/></g><defs><linearGradient id="SVGgf19qSBM" x1="10.547" x2="15.992" y1="18.055" y2="9.04" gradientUnits="userSpaceOnUse"><stop stop-color="#c20ff6"/><stop offset=".49" stop-color="#749cce"/><stop offset="1" stop-color="#47c1c1"/></linearGradient><linearGradient id="SVG9Jpjpbdr" x1="8.594" x2="21.706" y1="5.527" y2="13.26" gradientUnits="userSpaceOnUse"><stop stop-color="#4af3ff"/><stop offset="1" stop-color="#087792"/></linearGradient><linearGradient id="SVGxR8NXCGp" x1="18.897" x2="6.792" y1="6.858" y2="12.845" gradientUnits="userSpaceOnUse"><stop stop-color="#004957"/><stop offset="1" stop-color="#7a97d0"/></linearGradient><linearGradient id="SVGjz69ddtq" x1="7.785" x2="14.545" y1="9.265" y2="11.029" gradientUnits="userSpaceOnUse"><stop stop-color="#d29bff"/><stop offset="1" stop-color="#b661e2"/></linearGradient><linearGradient id="SVGPOzUSdVc" x1="12.03" x2="12.03" y1="3.866" y2="19.6" gradientUnits="userSpaceOnUse"><stop stop-color="#7599ce"/><stop offset="1" stop-color="#69039c"/></linearGradient><linearGradient id="SVGiwRkpnYD" x1="8.654" x2="20.008" y1="7.359" y2="12.702" gradientUnits="userSpaceOnUse"><stop stop-color="#1eb8f1"/><stop offset="1" stop-color="#9f76db"/></linearGradient><linearGradient id="SVGVaXIrnBb" x1="12.511" x2="4.376" y1="10.392" y2="16.828" gradientUnits="userSpaceOnUse"><stop stop-color="#313131" stop-opacity="0"/><stop offset="1"/></linearGradient><linearGradient id="SVGpfamkcXG" x1="11.755" x2="18.949" y1="12.756" y2="8.964" gradientUnits="userSpaceOnUse"><stop stop-color="#313131" stop-opacity="0"/><stop offset="1"/></linearGradient><linearGradient id="SVG3JqhpcHl" x1="11.685" x2="10.881" y1="7.019" y2="8.404" gradientUnits="userSpaceOnUse"><stop stop-color="#4adae8"/><stop offset="1" stop-color="#5e92c9"/></linearGradient><clipPath id="SVGHcSWxdhd"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg>Slim Background アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="token-branded:slim-background" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="token-branded:slim-background" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="token-branded:slim-background" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[token-branded--slim-background]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/token-branded -->
<div class="i-token-branded:slim-background"></div>Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="token-branded:slim-background"></iconify-icon>HTML 画像
<img src="https://iconyz.com/api/public/svg/token-branded/slim-background.svg" alt="Slim Background アイコン" width="24" height="24">Web3 Icons Branded の関連アイコン
Slim Background アイコン のよくある質問
Slim Background アイコンは商用利用でも無料ですか?
はい。Web3 Icons Branded icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Slim Background アイコンを使うには?
@iconify/react をインストールして <Icon icon="token-branded:slim-background" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Slim Background アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/token-branded/slim-background.svg" alt="Slim Background アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。