Pushpin アイコン

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

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

fluent-emoji:pushpin

Pushpin アイコン(fluent-emoji:pushpin)は、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"><path fill="#D93965" d="m11.534 12.626l7.352 7.352l6.523-6.524l-7.351-7.351z"/><path fill="url(#iC7qbJd)" d="m11.534 12.626l7.352 7.352l6.523-6.524l-7.351-7.351z"/><path fill="url(#iLUcr2c)" d="m11.534 12.626l7.352 7.352l6.523-6.524l-7.351-7.351z"/><path fill="url(#iSg4voe)" d="m11.534 12.626l7.352 7.352l6.523-6.524l-7.351-7.351z"/><g filter="url(#iqS64nz)"><path fill="url(#i68Aupd)" d="M18.02 2.375a1.5 1.5 0 0 1 2.122 0l8.996 8.995a1.5 1.5 0 0 1 0 2.122l-.668.667a2.8 2.8 0 0 1-3.96 0l-7.157-7.157a2.8 2.8 0 0 1 0-3.96z"/><path fill="url(#irXKHib)" d="M18.02 2.375a1.5 1.5 0 0 1 2.122 0l8.996 8.995a1.5 1.5 0 0 1 0 2.122l-.668.667a2.8 2.8 0 0 1-3.96 0l-7.157-7.157a2.8 2.8 0 0 1 0-3.96z"/></g><path fill="url(#iiMzd0d)" d="M13.296 16.38a1.298 1.298 0 0 1 1.836 1.836L4.163 29.185a1.298 1.298 0 1 1-1.836-1.836z"/><path fill="url(#i4xKTTd)" d="M13.296 16.38a1.298 1.298 0 0 1 1.836 1.836L4.163 29.185a1.298 1.298 0 1 1-1.836-1.836z"/><path fill="url(#iYggzyb)" d="M13.296 16.38a1.298 1.298 0 0 1 1.836 1.836L4.163 29.185a1.298 1.298 0 1 1-1.836-1.836z"/><path fill="url(#iooqwue)" d="M13.296 16.38a1.298 1.298 0 0 1 1.836 1.836L4.163 29.185a1.298 1.298 0 1 1-1.836-1.836z"/><g filter="url(#iJRGCBL)"><path fill="url(#iecvMkU)" d="M6.318 12.217a1.65 1.65 0 0 0 0 2.334l10.643 10.643a1.65 1.65 0 0 0 2.334 0l.676-.677a4 4 0 0 0 0-5.657l-7.32-7.32a4 4 0 0 0-5.656 0z"/><path fill="url(#it2Lyje)" d="M6.318 12.217a1.65 1.65 0 0 0 0 2.334l10.643 10.643a1.65 1.65 0 0 0 2.334 0l.676-.677a4 4 0 0 0 0-5.657l-7.32-7.32a4 4 0 0 0-5.656 0z"/><path fill="url(#iR2RgBD)" d="M6.318 12.217a1.65 1.65 0 0 0 0 2.334l10.643 10.643a1.65 1.65 0 0 0 2.334 0l.676-.677a4 4 0 0 0 0-5.657l-7.32-7.32a4 4 0 0 0-5.656 0z"/><path fill="url(#iiYfg3b)" d="M6.318 12.217a1.65 1.65 0 0 0 0 2.334l10.643 10.643a1.65 1.65 0 0 0 2.334 0l.676-.677a4 4 0 0 0 0-5.657l-7.32-7.32a4 4 0 0 0-5.656 0z"/></g><g filter="url(#iWCyhpb)"><path stroke="url(#iOwksxb)" stroke-linecap="round" stroke-width=".65" d="m3.267 28.201l6.778-6.803"/></g><defs><radialGradient id="irXKHib" cx="0" cy="0" r="1" gradientTransform="rotate(136.081 10.959 9.587)scale(1.17135 7.48692)" gradientUnits="userSpaceOnUse"><stop stop-color="#FF688C"/><stop offset="1" stop-color="#FF688C" stop-opacity="0"/></radialGradient><radialGradient id="i4xKTTd" cx="0" cy="0" r="1" gradientTransform="matrix(-6.5735 6.72649 -1.60417 -1.56769 11.166 18.672)" gradientUnits="userSpaceOnUse"><stop stop-color="#8C6E76"/><stop offset="1" stop-color="#8C6E76" stop-opacity="0"/></radialGradient><radialGradient id="iYggzyb" cx="0" cy="0" r="1" gradientTransform="matrix(-6.98122 6.98122 -1.52874 -1.52874 12.644 21.014)" gradientUnits="userSpaceOnUse"><stop offset=".157" stop-color="#7C547B"/><stop offset="1" stop-color="#7C547B" stop-opacity="0"/></radialGradient><radialGradient id="iooqwue" cx="0" cy="0" r="1" gradientTransform="matrix(-3.71993 12.01418 -6.15336 -1.90525 6.987 17.551)" gradientUnits="userSpaceOnUse"><stop offset=".899" stop-color="#826F91" stop-opacity="0"/><stop offset="1" stop-color="#826F91"/></radialGradient><radialGradient id="it2Lyje" cx="0" cy="0" r="1" gradientTransform="rotate(131.424 4.144 12.45)scale(2.83395 7.45916)" gradientUnits="userSpaceOnUse"><stop offset=".151" stop-color="#FF678C"/><stop offset="1" stop-color="#FF678C" stop-opacity="0"/></radialGradient><radialGradient id="iR2RgBD" cx="0" cy="0" r="1" gradientTransform="matrix(11.81248 2.125 -3.27442 18.20192 9.784 19.454)" gradientUnits="userSpaceOnUse"><stop offset=".717" stop-color="#FF6773" stop-opacity="0"/><stop offset="1" stop-color="#FF6773"/></radialGradient><radialGradient id="iiYfg3b" cx="0" cy="0" r="1" gradientTransform="rotate(-133.794 12.974 7.036)scale(13.6954)" gradientUnits="userSpaceOnUse"><stop offset=".816" stop-color="#C95179" stop-opacity="0"/><stop offset="1" stop-color="#C95179"/></radialGradient><linearGradient id="iC7qbJd" x1="14.784" x2="18.972" y1="9.579" y2="13.954" gradientUnits="userSpaceOnUse"><stop stop-color="#A7404E"/><stop offset="1" stop-color="#A7404E" stop-opacity="0"/></linearGradient><linearGradient id="iLUcr2c" x1="22.378" x2="19.378" y1="17.298" y2="14.454" gradientUnits="userSpaceOnUse"><stop stop-color="#9C475F"/><stop offset="1" stop-color="#D32A60" stop-opacity="0"/></linearGradient><linearGradient id="iSg4voe" x1="22.503" x2="21.44" y1="11.236" y2="12.329" gradientUnits="userSpaceOnUse"><stop offset=".208" stop-color="#A72249"/><stop offset="1" stop-color="#B14162" stop-opacity="0"/></linearGradient><linearGradient id="i68Aupd" x1="16.533" x2="28.222" y1="3.142" y2="14.329" gradientUnits="userSpaceOnUse"><stop stop-color="#E52C70"/><stop offset="1" stop-color="#FC3154"/></linearGradient><linearGradient id="iiMzd0d" x1="5.509" x2="7.65" y1="24.023" y2="25.908" gradientUnits="userSpaceOnUse"><stop stop-color="#9D9798"/><stop offset=".867" stop-color="#9B8EA4"/></linearGradient><linearGradient id="iecvMkU" x1="9.972" x2="20.597" y1="11.267" y2="23.954" gradientUnits="userSpaceOnUse"><stop stop-color="#E72F7B"/><stop offset="1" stop-color="#F63352"/></linearGradient><linearGradient id="iOwksxb" x1="3.267" x2="10.197" y1="28.405" y2="21.653" gradientUnits="userSpaceOnUse"><stop stop-color="#A9A1AC"/><stop offset="1" stop-color="#A9A1AC" stop-opacity="0"/></linearGradient><filter id="iqS64nz" width="14.044" height="14.044" x="16.533" y=".935" 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.764706 0 0 0 0 0.109804 0 0 0 0 0.301961 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_23113"/></filter><filter id="iJRGCBL" width="16.308" height="16.308" x="5.835" y="9.369" 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.827451 0 0 0 0 0.133333 0 0 0 0 0.372549 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_23113"/></filter><filter id="iWCyhpb" width="8.427" height="8.453" x="2.442" y="20.573" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_23113" stdDeviation=".25"/></filter></defs></g></svg>

Pushpin アイコンの使い方

React

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

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

Vue

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

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

Svelte

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

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

Tailwind CSS

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

UnoCSS

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

Web コンポーネント

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

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

HTML 画像

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

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

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

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

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

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

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

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

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

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