Joker アイコン

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

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

fluent-emoji:joker

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

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

SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="none"><g filter="url(#ifASGUd)"><rect width="22" height="28" x="5.062" y="2.134" fill="url(#in9x4jb)" rx="1.5"/></g><rect width="22" height="28" x="5.062" y="2.134" fill="url(#i9vlAlx)" rx="1.5"/><rect width="22" height="28" x="5.062" y="2.134" fill="url(#itJ64Be)" rx="1.5"/><rect width="22" height="28" x="5.062" y="2.134" fill="url(#iwrelGY)" rx="1.5"/><rect width="22" height="28" x="5.062" y="2.134" fill="url(#icIC7LE)" rx="1.5"/><g filter="url(#irPzOxO)"><path fill="url(#iaJ1Fzc)" d="m12.929 18.134l-2.273 2.284a.75.75 0 0 0 .531 1.279h2.117v2.115c0 .663.797 1 1.273.538l1.57-1.528l1.572 1.528a.75.75 0 0 0 1.272-.538v-2.115h2.117a.75.75 0 0 0 .532-1.28l-2.274-2.283z"/></g><rect width="7.438" height="9.547" x="12.398" y="11.947" fill="url(#iPYeJNd)" rx="3.719"/><g filter="url(#iDDljRq)"><path fill="url(#il3UKqc)" d="M19.445 11.306c-1.188.025-1.933.771-2.157 1.14l-.656 2.938l3.203 1.188v-2.218a.9.9 0 0 1 1.402-.747l.692.465l.984-.656l-1.125-1.188c-.286-.318-1.156-.947-2.343-.922"/></g><g filter="url(#i3OryBA)"><path fill="url(#izANuVk)" d="M12.75 11.306c1.187.025 1.932.771 2.156 1.14v3.22l-2.547.906v-2.218a.9.9 0 0 0-1.402-.747l-.692.465l-.984-.656l1.124-1.188c.287-.318 1.157-.947 2.344-.922"/></g><path fill="url(#i4fPTce)" d="M14.695 18.955a1.406 1.406 0 0 0 2.812 0z"/><path fill="url(#iHxDghb)" d="m13.554 15.76l2.188-7.907h.718l2.047 7.906z"/><path fill="url(#iAZsYad)" d="m13.554 15.76l2.188-7.907h.718l2.047 7.906z"/><g filter="url(#iQusY5a)"><circle cx="16.07" cy="7.939" r="1.32" fill="url(#i4ASgrb)"/></g><path fill="url(#iRLiLFc)" d="M12.398 17.397v-1.69a5.8 5.8 0 0 1 3.633-1.276c1.455 0 2.785.535 3.804 1.42v1.718c-.981-1.023-2.324-1.653-3.805-1.653c-1.395 0-2.669.56-3.632 1.481"/><path fill="url(#idoLSgb)" d="M12.398 17.397v-1.69a5.8 5.8 0 0 1 3.633-1.276c1.455 0 2.785.535 3.804 1.42v1.718c-.981-1.023-2.324-1.653-3.805-1.653c-1.395 0-2.669.56-3.632 1.481"/><g filter="url(#iNPyvze)"><circle cx="23.038" cy="14.283" r="1.32" fill="url(#izApNXd)"/></g><g filter="url(#iEFKvje)"><circle cx="9.085" cy="14.283" r="1.32" fill="url(#ih7z3Xo)"/></g><defs><linearGradient id="in9x4jb" x1="16.062" x2="16.062" y1="2.134" y2="30.134" gradientUnits="userSpaceOnUse"><stop stop-color="#D8D4DD"/><stop offset="1" stop-color="#DBD5E3"/></linearGradient><linearGradient id="i9vlAlx" x1="16.062" x2="16.062" y1="1.884" y2="3.197" gradientUnits="userSpaceOnUse"><stop stop-color="#D6D5D7"/><stop offset="1" stop-color="#D6D5D7" stop-opacity="0"/></linearGradient><linearGradient id="iwrelGY" x1="16.062" x2="16.062" y1="31.545" y2="28.117" gradientUnits="userSpaceOnUse"><stop stop-color="#B9A5CE"/><stop offset="1" stop-color="#B9A5CE" stop-opacity="0"/></linearGradient><linearGradient id="icIC7LE" x1="16.062" x2="16.062" y1="30.197" y2="29.767" gradientUnits="userSpaceOnUse"><stop stop-color="#B094CA"/><stop offset="1" stop-color="#B094CA" stop-opacity="0"/></linearGradient><linearGradient id="iaJ1Fzc" x1="19.757" x2="11.101" y1="19.353" y2="19.353" gradientUnits="userSpaceOnUse"><stop stop-color="#9072CB"/><stop offset="1" stop-color="#796BAA"/></linearGradient><linearGradient id="il3UKqc" x1="19.773" x2="19.773" y1="11.306" y2="16.572" gradientUnits="userSpaceOnUse"><stop stop-color="#44B0F4"/><stop offset=".757" stop-color="#5DD7FF"/></linearGradient><linearGradient id="izANuVk" x1="12.093" x2="12.093" y1="11.306" y2="16.572" gradientUnits="userSpaceOnUse"><stop stop-color="#EA448B"/><stop offset=".757" stop-color="#EB4755"/></linearGradient><linearGradient id="i4fPTce" x1="17.507" x2="14.976" y1="19.353" y2="19.884" gradientUnits="userSpaceOnUse"><stop stop-color="#EB4488"/><stop offset="1" stop-color="#EC4953"/></linearGradient><linearGradient id="iHxDghb" x1="16.03" x2="16.03" y1="7.853" y2="15.759" gradientUnits="userSpaceOnUse"><stop stop-color="#F4DF4A"/><stop offset="1" stop-color="#F3CD4A"/></linearGradient><linearGradient id="iAZsYad" x1="17.07" x2="16.616" y1="9.697" y2="9.838" gradientUnits="userSpaceOnUse"><stop stop-color="#F9E85C"/><stop offset="1" stop-color="#F9E85C" stop-opacity="0"/></linearGradient><linearGradient id="iRLiLFc" x1="13.038" x2="19.663" y1="16.166" y2="16.166" gradientUnits="userSpaceOnUse"><stop stop-color="#8F71C8"/><stop offset="1" stop-color="#756BA4"/></linearGradient><linearGradient id="idoLSgb" x1="12.398" x2="13.007" y1="16.759" y2="16.759" gradientUnits="userSpaceOnUse"><stop stop-color="#8F6BCC"/><stop offset="1" stop-color="#8F6ACC" stop-opacity="0"/></linearGradient><filter id="ifASGUd" width="24" height="30" x="4.062" y="1.134" 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="-1"/><feGaussianBlur stdDeviation="1.25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.737255 0 0 0 0 0.721569 0 0 0 0 0.752941 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_4077"/><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="1"/><feGaussianBlur stdDeviation="1.25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.921569 0 0 0 0 0.913725 0 0 0 0 0.933333 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_4077" result="effect2_innerShadow_18_4077"/><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/><feGaussianBlur stdDeviation=".125"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.803922 0 0 0 0 0.803922 0 0 0 0 0.803922 0 0 0 1 0"/><feBlend in2="effect2_innerShadow_18_4077" result="effect3_innerShadow_18_4077"/></filter><filter id="irPzOxO" width="11.624" height="6.629" x="10.336" y="18.034" 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="-.1"/><feGaussianBlur stdDeviation=".1"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.419608 0 0 0 0 0.368627 0 0 0 0 0.623529 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_4077"/><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=".1"/><feGaussianBlur stdDeviation=".1"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.643137 0 0 0 0 0.529412 0 0 0 0 0.854902 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_4077" result="effect2_innerShadow_18_4077"/></filter><filter id="iDDljRq" width="6.381" height="5.366" x="16.532" y="11.306" 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=".1"/><feGaussianBlur stdDeviation=".1"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.396078 0 0 0 0 0.760784 0 0 0 0 1 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_4077"/></filter><filter id="i3OryBA" width="5.725" height="5.366" x="9.181" y="11.306" 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=".1"/><feGaussianBlur stdDeviation=".1"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.952941 0 0 0 0 0.392157 0 0 0 0 0.627451 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_4077"/></filter><filter id="iQusY5a" width="2.741" height="2.741" x="14.649" y="6.619" 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=".1"/><feGaussianBlur stdDeviation=".125"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.992157 0 0 0 0 0.933333 0 0 0 0 0.411765 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_4077"/></filter><filter id="iNPyvze" width="2.641" height="2.741" x="21.718" y="12.963" 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 dy=".1"/><feGaussianBlur stdDeviation=".125"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.47451 0 0 0 0 0.917647 0 0 0 0 1 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_4077"/></filter><filter id="iEFKvje" width="2.641" height="2.741" x="7.765" y="12.963" 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 dy=".1"/><feGaussianBlur stdDeviation=".125"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.941176 0 0 0 0 0.34902 0 0 0 0 0.462745 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_4077"/></filter><radialGradient id="itJ64Be" cx="0" cy="0" r="1" gradientTransform="matrix(-1.4375 1.26563 -.71254 -.8093 26.929 2.416)" gradientUnits="userSpaceOnUse"><stop stop-color="#F5F4F7"/><stop offset="1" stop-color="#F5F4F7" stop-opacity="0"/></radialGradient><radialGradient id="iPYeJNd" cx="0" cy="0" r="1" gradientTransform="matrix(-4.12497 4.50003 -3.50575 -3.21356 18.882 16.353)" gradientUnits="userSpaceOnUse"><stop stop-color="#F1B1A4"/><stop offset="1" stop-color="#E9978F"/></radialGradient><radialGradient id="i4ASgrb" cx="0" cy="0" r="1" gradientTransform="matrix(-1.6875 1.9375 -2.4941 -2.1723 16.913 7.04)" gradientUnits="userSpaceOnUse"><stop stop-color="#F4E04B"/><stop offset="1" stop-color="#F1BE42"/></radialGradient><radialGradient id="izApNXd" cx="0" cy="0" r="1" gradientTransform="scale(3.33888 2.59375)rotate(90 .945 6.02)" gradientUnits="userSpaceOnUse"><stop stop-color="#5FD9FF"/><stop offset="1" stop-color="#3DABF4"/></radialGradient><radialGradient id="ih7z3Xo" cx="0" cy="0" r="1" gradientTransform="matrix(-2.64062 0 0 -3.39922 10.405 13.978)" gradientUnits="userSpaceOnUse"><stop stop-color="#EB488E"/><stop offset="1" stop-color="#EB465E"/></radialGradient></defs></g></svg>

Joker アイコンの使い方

React

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

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

Vue

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

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

Svelte

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

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

Tailwind CSS

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

UnoCSS

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

Web コンポーネント

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

<iconify-icon icon="fluent-emoji:joker"></iconify-icon>

HTML 画像

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

他のアイコンセットの Joker アイコン

Joker アイコンのよくある質問

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

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

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

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

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

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

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