Long Drum アイコン

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

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

fluent-emoji:long-drum

Long Drum アイコン(fluent-emoji:long-drum)は、Fluent Emoji セットの無料 SVG アイコンです（作者: Microsoft Corporation）。 32 × 32 のグリッドで描かれています。 Fluent Emoji icons は MIT ライセンスで公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。

アイコンセット: Fluent Emoji
作者: Microsoft Corporation
ライセンス: MIT
サイズ: 32 × 32
タグ: longdrum

SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="none"><path fill="url(#igCJvab)" d="M16.129 20.11v.015l-.117-.008l-.117.008v-.016c-1.767-.126-4.322-.492-7.297-3.773c-1.828-2.336-1.97-4.945-1.97-6.18V3.5h18.767v6.656c0 1.235-.141 3.844-1.97 6.18c-2.974 3.282-5.53 3.647-7.296 3.773"/><path fill="url(#iTvz96c)" d="M16.129 20.11v.015l-.117-.008l-.117.008v-.016c-1.767-.126-4.322-.492-7.297-3.773c-1.828-2.336-1.97-4.945-1.97-6.18V3.5h18.767v6.656c0 1.235-.141 3.844-1.97 6.18c-2.974 3.282-5.53 3.647-7.296 3.773"/><path fill="url(#iOockZi)" d="M16.129 20.11v.015l-.117-.008l-.117.008v-.016c-1.767-.126-4.322-.492-7.297-3.773c-1.828-2.336-1.97-4.945-1.97-6.18V3.5h18.767v6.656c0 1.235-.141 3.844-1.97 6.18c-2.974 3.282-5.53 3.647-7.296 3.773"/><g filter="url(#iMBGO7d)"><path fill="url(#iTQB1Ie)" d="M11.3 19.438h9.423l2.432 9.517a.8.8 0 0 1-.775.998H9.658a.8.8 0 0 1-.776-.997z"/><path fill="url(#ijRvFte)" d="M11.3 19.438h9.423l2.432 9.517a.8.8 0 0 1-.775.998H9.658a.8.8 0 0 1-.776-.997z"/></g><path fill="url(#iCSbWqq)" d="M11.3 19.438h9.423l2.432 9.517a.8.8 0 0 1-.775.998H9.658a.8.8 0 0 1-.776-.997z"/><path fill="url(#iBJ3S7b)" fill-rule="evenodd" d="M15.52 19.813V3.742h1v16.07z" clip-rule="evenodd"/><path fill="url(#iYndvdb)" fill-rule="evenodd" d="M15.52 19.813V3.742h1v16.07z" clip-rule="evenodd"/><path fill="url(#iEYeXvd)" fill-rule="evenodd" d="M15.52 19.813V3.742h1v16.07z" clip-rule="evenodd"/><g filter="url(#ipTPyVd)"><path fill="url(#im7VI4d)" fill-rule="evenodd" d="M10.002 3.828h1v5.844c0 2.458.003 6.005 3.825 9.243l-.646.763c-4.179-3.54-4.179-7.49-4.179-10z" clip-rule="evenodd"/></g><path fill="url(#i4SwzKb)" fill-rule="evenodd" d="M22.037 3.828h-1v5.844c0 2.458-.003 6.005-3.825 9.243l.647.763c4.178-3.54 4.178-7.49 4.178-10z" clip-rule="evenodd"/><rect width="20.719" height="1.969" x="5.66" y="2.047" fill="url(#iYWk1se)" rx=".984"/><rect width="20.719" height="1.969" x="5.66" y="2.047" fill="url(#iuneELc)" rx=".984"/><rect width="10.867" height="1.453" x="10.566" y="18.711" fill="url(#ixQOL3i)" rx=".727"/><rect width="10.867" height="1.453" x="10.566" y="18.711" fill="url(#iIdvo6M)" rx=".727"/><rect width="10.867" height="1.453" x="10.566" y="18.711" fill="url(#ibEYQob)" rx=".727"/><defs><linearGradient id="igCJvab" x1="16.012" x2="16.012" y1="13.375" y2="20.125" gradientUnits="userSpaceOnUse"><stop stop-color="#BE7846"/><stop offset="1" stop-color="#AA5961"/></linearGradient><linearGradient id="iOockZi" x1="16.012" x2="16.012" y1="3.688" y2="4.625" gradientUnits="userSpaceOnUse"><stop stop-color="#C07041"/><stop offset="1" stop-color="#C07041" stop-opacity="0"/></linearGradient><linearGradient id="iTQB1Ie" x1="13.176" x2="20.238" y1="26.125" y2="26.125" gradientUnits="userSpaceOnUse"><stop stop-color="#CB8349"/><stop offset=".686" stop-color="#E7A672"/></linearGradient><linearGradient id="ijRvFte" x1="9.363" x2="12.426" y1="25.188" y2="25.906" gradientUnits="userSpaceOnUse"><stop stop-color="#B17E59"/><stop offset="1" stop-color="#BF7D4B" stop-opacity="0"/></linearGradient><linearGradient id="iCSbWqq" x1="16.551" x2="16.551" y1="30.188" y2="29.188" gradientUnits="userSpaceOnUse"><stop stop-color="#BF6466"/><stop offset="1" stop-color="#BF6466" stop-opacity="0"/></linearGradient><linearGradient id="iYndvdb" x1="15.48" x2="15.684" y1="18.727" y2="18.727" gradientUnits="userSpaceOnUse"><stop offset=".308" stop-color="#442F54"/><stop offset="1" stop-color="#442F54" stop-opacity="0"/></linearGradient><linearGradient id="iEYeXvd" x1="16.57" x2="16.363" y1="19.344" y2="19.344" gradientUnits="userSpaceOnUse"><stop offset=".222" stop-color="#5D4F6A"/><stop offset="1" stop-color="#5D4F6A" stop-opacity="0"/></linearGradient><linearGradient id="im7VI4d" x1="12.415" x2="12.415" y1="3.828" y2="19.031" gradientUnits="userSpaceOnUse"><stop offset=".6" stop-color="#51455E"/><stop offset="1" stop-color="#43255B"/></linearGradient><linearGradient id="i4SwzKb" x1="19.625" x2="19.625" y1="3.828" y2="19.678" gradientUnits="userSpaceOnUse"><stop offset=".214" stop-color="#60506B"/><stop offset=".776" stop-color="#48285C"/></linearGradient><linearGradient id="iYWk1se" x1="16.02" x2="16.02" y1="2.047" y2="4.188" gradientUnits="userSpaceOnUse"><stop stop-color="#E1B177"/><stop offset="1" stop-color="#F4AD93"/></linearGradient><linearGradient id="ixQOL3i" x1="16" x2="16" y1="18.711" y2="20.164" gradientUnits="userSpaceOnUse"><stop stop-color="#2B1D37"/><stop offset="1" stop-color="#5A316F"/></linearGradient><radialGradient id="iTvz96c" cx="0" cy="0" r="1" gradientTransform="matrix(0 9.9375 -10.0567 0 21.457 7.375)" gradientUnits="userSpaceOnUse"><stop offset=".192" stop-color="#E69F62"/><stop offset="1" stop-color="#E69F62" stop-opacity="0"/></radialGradient><radialGradient id="iBJ3S7b" cx="0" cy="0" r="1" gradientTransform="matrix(0 11.9063 -1.43774 0 16.52 11.531)" gradientUnits="userSpaceOnUse"><stop offset=".238" stop-color="#4F3965"/><stop offset="1" stop-color="#3C1157"/></radialGradient><radialGradient id="iuneELc" cx="0" cy="0" r="1" gradientTransform="matrix(0 1.03125 -12.6042 0 21.082 2.625)" gradientUnits="userSpaceOnUse"><stop offset=".212" stop-color="#FFD8A2"/><stop offset="1" stop-color="#FFD8A2" stop-opacity="0"/></radialGradient><radialGradient id="iIdvo6M" cx="0" cy="0" r="1" gradientTransform="matrix(0 .70313 -5.625 0 18.816 19.25)" gradientUnits="userSpaceOnUse"><stop offset=".156" stop-color="#746681"/><stop offset="1" stop-color="#746681" stop-opacity="0"/></radialGradient><radialGradient id="ibEYQob" cx="0" cy="0" r="1" gradientTransform="matrix(0 .85156 -6.36841 0 10.8 19.313)" gradientUnits="userSpaceOnUse"><stop stop-color="#49454D"/><stop offset="1" stop-color="#49454D" stop-opacity="0"/></radialGradient><filter id="iMBGO7d" width="14.423" height="11.016" x="8.757" y="18.938" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-.1" dy="-.5"/><feGaussianBlur stdDeviation=".5"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.760784 0 0 0 0 0.458824 0 0 0 0 0.309804 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_19005"/></filter><filter id="ipTPyVd" width="4.925" height="15.95" x="9.902" y="3.828" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-.15" dy=".1"/><feGaussianBlur stdDeviation=".05"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.270588 0 0 0 0 0.203922 0 0 0 0 0.329412 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_19005"/></filter></defs></g></svg>

Long Drum アイコンの使い方

React

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

<Icon icon="fluent-emoji:long-drum" width="24" />

Vue

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

<template>
  <Icon icon="fluent-emoji:long-drum" width="24" />
</template>

Svelte

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

<Icon icon="fluent-emoji:long-drum" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-emoji--long-drum]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/fluent-emoji -->
<div class="i-fluent-emoji:long-drum"></div>

Web コンポーネント

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

<iconify-icon icon="fluent-emoji:long-drum"></iconify-icon>

HTML 画像

<img src="https://iconyz.com/api/public/svg/fluent-emoji/long-drum.svg" alt="Long Drum アイコン" width="24" height="24">

他のアイコンセットの Long Drum アイコン

Long Drum アイコンのよくある質問

Long Drum アイコンは商用利用でも無料ですか?

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

React で Long Drum アイコンを使うには?

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

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

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

Fluent Emoji アイコンをすべて見る →