Fireworks アイコン
fluent-emoji:fireworks
Fireworks アイコン(fluent-emoji:fireworks)は、Fluent Emoji セットの無料 SVG アイコンです(作者: Microsoft Corporation)。 32 × 32 のグリッドで描かれています。 Fluent Emoji icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
- アイコンセット
- Fluent Emoji
- 作者
- Microsoft Corporation
- ライセンス
- MIT
- サイズ
- 32 × 32
- タグ
- firework
SVG コード
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="none"><path fill="url(#iVP98mi)" d="M26.296 1.96H5.656c-2.03 0-3.68 1.65-3.68 3.68v20.64c0 2.03 1.65 3.68 3.68 3.68h20.64c2.03 0 3.68-1.65 3.68-3.68V5.64c0-2.03-1.65-3.68-3.68-3.68"/><path fill="url(#i5iQ8Wc)" d="M26.296 1.96H5.656c-2.03 0-3.68 1.65-3.68 3.68v20.64c0 2.03 1.65 3.68 3.68 3.68h20.64c2.03 0 3.68-1.65 3.68-3.68V5.64c0-2.03-1.65-3.68-3.68-3.68"/><path fill="url(#i52JzIb)" d="M26.296 1.96H5.656c-2.03 0-3.68 1.65-3.68 3.68v20.64c0 2.03 1.65 3.68 3.68 3.68h20.64c2.03 0 3.68-1.65 3.68-3.68V5.64c0-2.03-1.65-3.68-3.68-3.68"/><g filter="url(#iluyMGe)"><rect width="2.055" height="22.561" x="26.447" y="4.141" fill="url(#iB2xmNc)" rx="1.027"/></g><circle cx="15.976" cy="16.953" r=".953" fill="url(#ixMiode)"/><rect width="1.109" height="4.141" x="15.398" y="6.445" fill="url(#i939SWd)" rx=".555"/><rect width="1.109" height="4.141" x="8.489" y="9.798" fill="url(#iKZFgub)" rx=".555" transform="rotate(-45 8.49 9.798)"/><rect width="1.109" height="4.141" fill="url(#iqSs0gc)" rx=".555" transform="scale(1 -1)rotate(-45 -23.637 -21.951)"/><rect width="1.109" height="4.141" fill="url(#iKSI18b)" rx=".555" transform="scale(-1 1)rotate(-45 .096 33.22)"/><rect width="1.109" height="4.141" x="23.369" y="23.144" fill="url(#iTofm8d)" rx=".555" transform="rotate(135 23.369 23.144)"/><rect width="1.109" height="4.141" x="6.004" y="17.07" fill="url(#iHHGaPd)" rx=".555" transform="rotate(-90 6.004 17.07)"/><rect width="1.109" height="4.141" fill="url(#ifU2mKc)" rx=".555" transform="matrix(0 -1 -1 0 25.948 17.07)"/><rect width="1.109" height="1.82" x="15.398" y="4.141" fill="url(#i7HPSwA)" rx=".555"/><rect width="1.109" height="1.82" x="6.844" y="8.164" fill="url(#iMedWAd)" rx=".555" transform="rotate(-45 6.844 8.164)"/><rect width="1.109" height="1.82" fill="url(#iAQoH1c)" rx=".555" transform="scale(1 -1)rotate(-45 -26.433 -20.782)"/><rect width="1.109" height="1.82" fill="url(#iDSeICb)" rx=".555" transform="scale(-1 1)rotate(-45 -2.699 34.39)"/><rect width="1.109" height="1.82" x="25.014" y="24.778" fill="url(#iTgNLKe)" rx=".555" transform="rotate(135 25.014 24.778)"/><rect width="1.109" height="1.82" x="3.685" y="17.078" fill="url(#iS5yGse)" rx=".555" transform="rotate(-90 3.685 17.078)"/><rect width="1.109" height="1.82" fill="url(#ibDACyc)" rx=".555" transform="matrix(0 -1 -1 0 28.267 17.078)"/><path fill="url(#ic7NS5e)" d="M15.398 19.53a.568.568 0 1 1 1.137 0v10.43h-1.137z"/><path fill="url(#ivNP5zb)" d="M12.616 10.236a.527.527 0 1 1 .976-.397l1.93 4.747a.527.527 0 1 1-.976.397z"/><path fill="url(#iMvFMpB)" d="M9.128 14.34a.527.527 0 1 1 .491-.932l4.521 2.384a.527.527 0 0 1-.491.932z"/><path fill="url(#iIKYoVc)" d="M22.784 14.293a.527.527 0 0 0-.491-.932l-4.52 2.384a.527.527 0 1 0 .491.932z"/><path fill="url(#iNSKRib)" d="M22.881 18.979a.527.527 0 0 1-.282 1.015l-4.924-1.368a.527.527 0 1 1 .282-1.015z"/><path fill="url(#iSckWMc)" d="M8.988 19.018a.526.526 0 1 0 .282 1.015l4.924-1.368a.527.527 0 1 0-.282-1.015z"/><path fill="url(#ivrcbTc)" d="M8.988 19.018a.526.526 0 1 0 .282 1.015l4.924-1.368a.527.527 0 1 0-.282-1.015z"/><path fill="url(#i0eBBnv)" d="M12.537 23.091a.526.526 0 1 0 .951.45l1.244-2.632a.526.526 0 0 0-.951-.45z"/><path fill="url(#izi9PIe)" d="M19.25 23.154a.526.526 0 0 1-.972.404l-1.116-2.689a.526.526 0 0 1 .972-.403z"/><path fill="url(#i9Jilsc)" d="M19.266 10.224a.527.527 0 0 0-.974-.403l-1.95 4.717a.527.527 0 1 0 .974.403z"/><circle cx="12.418" cy="8.063" r=".5" fill="url(#i5PcnHb)"/><circle cx="12.535" cy="25.026" r=".5" fill="url(#ixMCs2b)"/><circle cx="19.537" cy="8.063" r=".5" fill="url(#icoYVle)"/><circle cx="19.535" cy="25.026" r=".5" fill="url(#iY336gd)"/><circle cx="24.541" cy="20.106" r=".5" fill="url(#iAzwbWc)"/><circle cx="7.489" cy="20.165" r=".5" fill="url(#iWtngZs)"/><circle cx="7.489" cy="20.165" r=".5" fill="url(#iWDd2ur)"/><circle cx="24.549" cy="12.998" r=".5" fill="url(#iprBUkc)"/><circle cx="7.481" cy="13.127" r=".5" fill="url(#iNQ2gad)"/><circle cx="7.481" cy="13.127" r=".5" fill="url(#iPoPb9j)"/><defs><radialGradient id="ixMiode" cx="0" cy="0" r="1" gradientTransform="rotate(136.273 4.923 11.567)scale(1.49192)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFC957"/><stop offset="1" stop-color="#E99948"/></radialGradient><radialGradient id="iqSs0gc" cx="0" cy="0" r="1" gradientTransform="matrix(.0221 -3.69021 .59647 .00357 .557 3.91)" gradientUnits="userSpaceOnUse"><stop stop-color="#F65B7F"/><stop offset="1" stop-color="#D62E52"/></radialGradient><radialGradient id="iKSI18b" cx="0" cy="0" r="1" gradientTransform="rotate(90.084 .195 .366)scale(3.96888 .87269)" gradientUnits="userSpaceOnUse"><stop stop-color="#EC548A"/><stop offset="1" stop-color="#DC257C"/></radialGradient><radialGradient id="iHHGaPd" cx="0" cy="0" r="1" gradientTransform="matrix(0 -2.75775 .80162 0 6.558 21.092)" gradientUnits="userSpaceOnUse"><stop stop-color="#F15675"/><stop offset="1" stop-color="#DF3456"/></radialGradient><radialGradient id="ifU2mKc" cx="0" cy="0" r="1" gradientTransform="matrix(0 2.60448 -.6293 0 .555 .519)" gradientUnits="userSpaceOnUse"><stop stop-color="#F85E9A"/><stop offset="1" stop-color="#DB1E8A"/></radialGradient><radialGradient id="iAQoH1c" cx="0" cy="0" r="1" gradientTransform="matrix(-.0221 -1.5468 .5875 -.0084 .797 1.842)" gradientUnits="userSpaceOnUse"><stop stop-color="#F65B7F"/><stop offset="1" stop-color="#D62E52"/></radialGradient><radialGradient id="iDSeICb" cx="0" cy="0" r="1" gradientTransform="matrix(.02023 1.76174 -.59857 .00687 .388 -.08)" gradientUnits="userSpaceOnUse"><stop stop-color="#F55E94"/><stop offset="1" stop-color="#D8207F"/></radialGradient><radialGradient id="iS5yGse" cx="0" cy="0" r="1" gradientTransform="matrix(0 -1.21237 .80162 0 4.24 18.846)" gradientUnits="userSpaceOnUse"><stop stop-color="#F15675"/><stop offset="1" stop-color="#DF3456"/></radialGradient><radialGradient id="ibDACyc" cx="0" cy="0" r="1" gradientTransform="matrix(0 1.09503 -.55469 0 .555 .134)" gradientUnits="userSpaceOnUse"><stop stop-color="#F85E9A"/><stop offset="1" stop-color="#DB1E8A"/></radialGradient><radialGradient id="iIKYoVc" cx="0" cy="0" r="1" gradientTransform="matrix(-4.56251 2.43749 -1.04723 -1.96021 22.788 13.71)" gradientUnits="userSpaceOnUse"><stop stop-color="#F4BF38"/><stop offset="1" stop-color="#E49B40"/></radialGradient><radialGradient id="ivrcbTc" cx="0" cy="0" r="1" gradientTransform="rotate(159.829 5.697 10.217)scale(1.02344 .71371)" gradientUnits="userSpaceOnUse"><stop stop-color="#FDC05E"/><stop offset="1" stop-color="#FDC05E" stop-opacity="0"/></radialGradient><radialGradient id="i9Jilsc" cx="0" cy="0" r="1" gradientTransform="matrix(-2.07855 4.73327 -1.1556 -.50746 18.963 9.801)" gradientUnits="userSpaceOnUse"><stop stop-color="#F4BF38"/><stop offset="1" stop-color="#E49B40"/></radialGradient><radialGradient id="i5PcnHb" cx="0" cy="0" r="1" gradientTransform="rotate(136.273 4.768 6.462)scale(.78264)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFC957"/><stop offset="1" stop-color="#E99948"/></radialGradient><radialGradient id="ixMCs2b" cx="0" cy="0" r="1" gradientTransform="rotate(136.273 1.423 14.968)scale(.78265)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFC957"/><stop offset="1" stop-color="#E99948"/></radialGradient><radialGradient id="icoYVle" cx="0" cy="0" r="1" gradientTransform="rotate(136.273 8.328 7.89)scale(.78264)" gradientUnits="userSpaceOnUse"><stop stop-color="#FED05D"/><stop offset="1" stop-color="#E6A546"/></radialGradient><radialGradient id="iY336gd" cx="0" cy="0" r="1" gradientTransform="rotate(136.273 4.923 16.372)scale(.78265)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFC957"/><stop offset="1" stop-color="#E99948"/></radialGradient><radialGradient id="iAzwbWc" cx="0" cy="0" r="1" gradientTransform="rotate(136.273 8.413 14.916)scale(.78264)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFD453"/><stop offset="1" stop-color="#EDAE4C"/></radialGradient><radialGradient id="iWtngZs" cx="0" cy="0" r="1" gradientTransform="rotate(136.273 -.126 11.525)scale(.78264)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFC957"/><stop offset="1" stop-color="#E99948"/></radialGradient><radialGradient id="iWDd2ur" cx="0" cy="0" r="1" gradientTransform="rotate(90 -6.158 13.647)scale(.86026)" gradientUnits="userSpaceOnUse"><stop offset=".436" stop-color="#E2834F" stop-opacity="0"/><stop offset="1" stop-color="#E2834F"/></radialGradient><radialGradient id="iprBUkc" cx="0" cy="0" r="1" gradientTransform="rotate(136.273 9.842 11.364)scale(.78264)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFDB62"/><stop offset="1" stop-color="#E9B04B"/></radialGradient><radialGradient id="iNQ2gad" cx="0" cy="0" r="1" gradientTransform="rotate(136.273 1.283 8.004)scale(.78265)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFC957"/><stop offset="1" stop-color="#E99948"/></radialGradient><radialGradient id="iPoPb9j" cx="0" cy="0" r="1" gradientTransform="rotate(90 -2.643 10.123)scale(.86026)" gradientUnits="userSpaceOnUse"><stop offset=".436" stop-color="#E2834F" stop-opacity="0"/><stop offset="1" stop-color="#E2834F"/></radialGradient><linearGradient id="iVP98mi" x1="15.976" x2="15.976" y1="26.033" y2=".408" gradientUnits="userSpaceOnUse"><stop stop-color="#8A52B9"/><stop offset="1" stop-color="#1C1C1D"/></linearGradient><linearGradient id="i5iQ8Wc" x1="-1.774" x2="5.264" y1="20.281" y2="20.281" gradientUnits="userSpaceOnUse"><stop stop-color="#181818"/><stop offset="1" stop-color="#5E2E91" stop-opacity="0"/></linearGradient><linearGradient id="i52JzIb" x1="17.157" x2="17.157" y1="31.567" y2="27.254" gradientUnits="userSpaceOnUse"><stop offset=".127" stop-color="#5D328D"/><stop offset="1" stop-color="#5D328D" stop-opacity="0"/></linearGradient><linearGradient id="iB2xmNc" x1="27.474" x2="27.474" y1="4.141" y2="26.702" gradientUnits="userSpaceOnUse"><stop stop-color="#514E55"/><stop offset="1" stop-color="#9F6AD1"/></linearGradient><linearGradient id="i939SWd" x1="16.718" x2="15.809" y1="8.995" y2="8.995" gradientUnits="userSpaceOnUse"><stop stop-color="#F65E88"/><stop offset="1" stop-color="#D71F6B"/></linearGradient><linearGradient id="iKZFgub" x1="9.603" x2="8.868" y1="11.477" y2="11.477" gradientUnits="userSpaceOnUse"><stop stop-color="#F15676"/><stop offset="1" stop-color="#DA295E"/></linearGradient><linearGradient id="iTofm8d" x1="23.432" x2="24.43" y1="25.372" y2="25.293" gradientUnits="userSpaceOnUse"><stop stop-color="#FB568D"/><stop offset="1" stop-color="#E31F86"/></linearGradient><linearGradient id="i7HPSwA" x1="16.718" x2="15.809" y1="5.262" y2="5.262" gradientUnits="userSpaceOnUse"><stop stop-color="#F65E88"/><stop offset="1" stop-color="#D71F6B"/></linearGradient><linearGradient id="iMedWAd" x1="7.957" x2="7.222" y1="8.902" y2="8.902" gradientUnits="userSpaceOnUse"><stop stop-color="#F15676"/><stop offset="1" stop-color="#DA295E"/></linearGradient><linearGradient id="iTgNLKe" x1="25.077" x2="26.05" y1="25.757" y2="25.583" gradientUnits="userSpaceOnUse"><stop stop-color="#FB568D"/><stop offset="1" stop-color="#E31F86"/></linearGradient><linearGradient id="ic7NS5e" x1="16.682" x2="15.398" y1="25.004" y2="25.004" gradientUnits="userSpaceOnUse"><stop stop-color="#FDC14E"/><stop offset="1" stop-color="#EEA83B"/></linearGradient><linearGradient id="ivNP5zb" x1="14.451" x2="13.461" y1="11.962" y2="12.411" gradientUnits="userSpaceOnUse"><stop offset=".028" stop-color="#FFC75D"/><stop offset=".599" stop-color="#E99D43"/></linearGradient><linearGradient id="iMvFMpB" x1="11.634" x2="11.092" y1="14.471" y2="15.549" gradientUnits="userSpaceOnUse"><stop offset=".028" stop-color="#FFC75D"/><stop offset=".664" stop-color="#E99D43"/></linearGradient><linearGradient id="iNSKRib" x1="21.116" x2="20.866" y1="18.602" y2="19.477" gradientUnits="userSpaceOnUse"><stop stop-color="#F4BF38"/><stop offset="1" stop-color="#E49B40"/></linearGradient><linearGradient id="iSckWMc" x1="11.491" x2="11.804" y1="17.589" y2="18.981" gradientUnits="userSpaceOnUse"><stop offset=".028" stop-color="#FFC75D"/><stop offset="1" stop-color="#E99D43"/></linearGradient><linearGradient id="i0eBBnv" x1="14.51" x2="13.118" y1="22.725" y2="22" gradientUnits="userSpaceOnUse"><stop offset=".028" stop-color="#FFC75D"/><stop offset=".929" stop-color="#E99D43"/></linearGradient><linearGradient id="izi9PIe" x1="18.429" x2="17.398" y1="21.711" y2="22.211" gradientUnits="userSpaceOnUse"><stop offset=".028" stop-color="#FFC75D"/><stop offset=".929" stop-color="#E99D43"/></linearGradient><filter id="iluyMGe" width="7.055" height="27.561" x="23.947" y="1.641" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_247" stdDeviation="1.25"/></filter></defs></g></svg>Fireworks アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-emoji:fireworks" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-emoji:fireworks" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-emoji:fireworks" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-emoji--fireworks]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-emoji -->
<div class="i-fluent-emoji:fireworks"></div>Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-emoji:fireworks"></iconify-icon>HTML 画像
<img src="https://iconyz.com/api/public/svg/fluent-emoji/fireworks.svg" alt="Fireworks アイコン" width="24" height="24">他のアイコンセットの Fireworks アイコン
Fireworks アイコン のよくある質問
Fireworks アイコンは商用利用でも無料ですか?
はい。Fluent Emoji icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Fireworks アイコンを使うには?
@iconify/react をインストールして <Icon icon="fluent-emoji:fireworks" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Fireworks アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/fluent-emoji/fireworks.svg" alt="Fireworks アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。