Moon Background アイコン
token-branded:moon-background
Moon Background アイコン(token-branded:moon-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
- タグ
- moonbackground
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="#000" d="M9.905 4.819a.8.8 0 0 1 .692-.678c.33-.085 1.332-.221 2.65-.08c.253.033.724.226.78.734a7.5 7.5 0 0 1 2.306 1.101c.236-.14.678-.254 1.12.189c.302.263 1.101 1.115 1.897 2.428c.165.282.343.927-.189 1.275a7.5 7.5 0 0 1 .311 2.758c.259.127.588.41.518.87c-.02.32-.203 1.224-.763 2.301a.88.88 0 0 1-.974.4a7.5 7.5 0 0 1-1.2 1.398c.113.264.165.762-.324 1.097a9.1 9.1 0 0 1-2.542 1.27c-.282.08-.884.094-1.152-.485a7.6 7.6 0 0 1-1.398.062c-.236.574-.875.583-1.186.508a10.8 10.8 0 0 1-2.87-1.186a.904.904 0 0 1-.457-1.12a7.8 7.8 0 0 1-1.19-1.294c-.598.165-.994-.339-1.12-.63c-.41-.956-.68-1.966-.8-2.998c-.08-.58.244-.88.512-1.003a7.6 7.6 0 0 1 .452-2.324c-.41-.353-.273-.885-.141-1.125a9.3 9.3 0 0 1 1.717-2.184c.386-.376.8-.282 1.036-.14c.7-.514 1.483-.9 2.315-1.144"/><path fill="#d9b86c" d="M13.175 4.908a6.1 6.1 0 0 0-2.456.047l-.17.715l2.909-.056zm3.567 1.713l-.602.254l2.042 2.941l.405-.748a6.9 6.9 0 0 0-1.845-2.447m1.751 8.607l-.772.132l.772-2.602l.612.54a7.6 7.6 0 0 1-.612 1.93m-4.659 3.798l-.644-.518l3.025-1.562v.94a6.9 6.9 0 0 1-2.38 1.14m-3.035.098l.541-.564l-3.426-1.534v.908a7.15 7.15 0 0 0 2.885 1.19m-5.08-3.642h.74l-.904-3.473l-.716.499c.156 1.61.654 2.654.88 2.974m-.164-6.706l.414.697l2.042-2.494l-.842-.269a6.5 6.5 0 0 0-1.614 2.066"/><path fill="#efda8d" d="M12 18.626a6.66 6.66 0 0 0 6.663-6.655a6.66 6.66 0 0 0-6.664-6.654a6.66 6.66 0 0 0-6.663 6.655a6.66 6.66 0 0 0 6.663 6.654"/><path fill="#f4eebe" d="M11.999 17.482c.72 0 1.407-.141 2.037-.386c.706.179 1.694-.15 2.5-.903c1.02-.96 1.378-2.25.837-2.946a5.5 5.5 0 0 0-.193-3.2c.108-.687-.202-1.581-.88-2.325c-.819-.903-1.906-1.294-2.635-1.016a5.53 5.53 0 0 0-7.19 5.26c0 1.356.489 2.598 1.303 3.558a2.57 2.57 0 0 0 1.284 1.742c.847.508 1.803.56 2.41.188q.26.028.527.028"/><path fill="#c29e58" d="M16.646 10.058c.401-.38.096-1.355-.682-2.175s-1.735-1.176-2.136-.795c-.402.381-.096 1.355.682 2.175s1.734 1.176 2.136.795"/><path fill="#a07e41" d="M13.665 7.727c.475-.047 1.181.31 1.788.941c.428.416.723.95.847 1.534c-.48.047-1.186-.31-1.788-.941a3 3 0 0 1-.847-1.534"/><path fill="#c29e58" d="M8.346 15.57c-.196.395.298 1.04 1.104 1.44s1.619.402 1.816.007c.196-.395-.298-1.04-1.104-1.44s-1.619-.403-1.816-.007"/><path fill="#a07e41" d="M11.218 16.49c-.344.164-.97.093-1.591-.217a2.4 2.4 0 0 1-1.054-.913c.343-.165.97-.094 1.59.216a2.4 2.4 0 0 1 1.054.913"/><path fill="#c29e58" d="M13.453 16.363c.577.645 1.845.453 2.832-.429c.987-.881 1.318-2.118.74-2.763c-.577-.644-1.845-.452-2.831.43c-.987.88-1.319 2.117-.741 2.762"/><path fill="#a07e41" d="M16.375 12.814c0 .555-.47 1.365-1.251 2.056c-.659.589-1.37.951-1.91 1.012c-.227-.593.164-1.539.987-2.268c.73-.659 1.596-.955 2.174-.8"/><path fill="#c29e58" d="M9.83 13.383c1.424 0 2.579-1.2 2.579-2.682s-1.155-2.682-2.58-2.682c-1.423 0-2.578 1.2-2.578 2.682s1.155 2.682 2.579 2.682"/><path fill="#a07e41" d="M9.835 13.384a2.636 2.636 0 0 0 2.574-2.683c0-.47-.118-.918-.325-1.308a2.5 2.5 0 0 0-.602-.07a2.635 2.635 0 0 0-2.58 2.682c0 .47.118.917.33 1.308q.284.07.598.07z"/></g><defs><clipPath id="SVGHcSWxdhd"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg>Moon Background アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="token-branded:moon-background" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="token-branded:moon-background" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="token-branded:moon-background" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[token-branded--moon-background]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/token-branded -->
<div class="i-token-branded:moon-background"></div>Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="token-branded:moon-background"></iconify-icon>HTML 画像
<img src="https://iconyz.com/api/public/svg/token-branded/moon-background.svg" alt="Moon Background アイコン" width="24" height="24">Web3 Icons Branded の関連アイコン
Moon Background アイコン のよくある質問
Moon Background アイコンは商用利用でも無料ですか?
はい。Web3 Icons Branded icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Moon Background アイコンを使うには?
@iconify/react をインストールして <Icon icon="token-branded:moon-background" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Moon Background アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/token-branded/moon-background.svg" alt="Moon Background アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。