Watch アイコン
fluent-emoji:watch
Watch アイコン(fluent-emoji:watch)は、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 xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="none"><rect width="2.866" height="3.812" x="26.335" y="13.72" fill="url(#ikKv1ad)" rx=".6"/><rect width="2.866" height="3.812" x="26.335" y="13.72" fill="url(#i2E1e9b)" rx=".6"/><rect width="2.866" height="3.812" x="26.335" y="13.72" fill="url(#iY6j04c)" rx=".6"/><rect width="14" height="28" x="9" y="2" fill="url(#ivH0YSJ)" rx="1"/><rect width="14" height="28" x="9" y="2" fill="url(#ioKoSRc)" rx="1"/><rect width="14" height="28" x="9" y="2" fill="url(#iio5I8d)" rx="1"/><rect width="14" height="28" x="9" y="2" fill="url(#iGSHN9d)" rx="1"/><rect width="14" height="28" x="9" y="2" fill="url(#iRp42II)" rx="1"/><rect width="14" height="28" x="9" y="2" fill="url(#ie2LvTr)" rx="1"/><circle cx="16" cy="16" r="9" fill="url(#i3Ksbld)"/><g filter="url(#iNvDOyc)"><path fill="url(#iVoWsud)" d="M14.66 9.512a.677.677 0 1 1 1.354 0v5.412a1.64 1.64 0 1 1-1.433 2.949L11.8 20.207a.677.677 0 0 1-.87-1.038l2.815-2.362a1.64 1.64 0 0 1 .915-1.883z"/></g><g filter="url(#iL5ySAN)"><path fill="url(#i2jQPFe)" fill-rule="evenodd" d="M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4S4 9.373 4 16s5.373 12 12 12m0-3a9 9 0 1 0 0-18a9 9 0 0 0 0 18" clip-rule="evenodd"/></g><rect width="1.354" height="7.233" x="15.323" y="8.417" fill="url(#if6cybb)" rx=".677"/><rect width="1.354" height="6.431" x="16" y="15.054" fill="url(#ieRjgLK)" rx=".677" transform="rotate(50.006 16 15.054)"/><circle cx="16" cy="16" r="1.639" fill="url(#iQ7p6Gb)"/><defs><linearGradient id="iY6j04c" x1="27.406" x2="28.453" y1="13.72" y2="14.453" gradientUnits="userSpaceOnUse"><stop stop-color="#5190D7"/><stop offset="1" stop-color="#5190D7" stop-opacity="0"/></linearGradient><linearGradient id="ivH0YSJ" x1="16" x2="16" y1="2" y2="30" gradientUnits="userSpaceOnUse"><stop stop-color="#3B96E6"/><stop offset="1" stop-color="#256AFF"/></linearGradient><linearGradient id="ioKoSRc" x1="23.563" x2="20.75" y1="14.546" y2="14.546" gradientUnits="userSpaceOnUse"><stop stop-color="#4CB2FF"/><stop offset="1" stop-color="#4CB2FF" stop-opacity="0"/></linearGradient><linearGradient id="iio5I8d" x1="9.313" x2="14.688" y1=".672" y2="5.797" gradientUnits="userSpaceOnUse"><stop stop-color="#596FC7"/><stop offset="1" stop-color="#596FC7" stop-opacity="0"/></linearGradient><linearGradient id="iGSHN9d" x1="9" x2="10.625" y1="18.422" y2="18.422" gradientUnits="userSpaceOnUse"><stop stop-color="#444A9E"/><stop offset="1" stop-color="#444A9E" stop-opacity="0"/></linearGradient><linearGradient id="iRp42II" x1="9.938" x2="11.625" y1="31.422" y2="25.859" gradientUnits="userSpaceOnUse"><stop stop-color="#2845FF"/><stop offset="1" stop-color="#2845FF" stop-opacity="0"/></linearGradient><linearGradient id="ie2LvTr" x1="17.049" x2="17.049" y1="30.275" y2="29.358" gradientUnits="userSpaceOnUse"><stop stop-color="#5D7AFF"/><stop offset="1" stop-color="#5D7AFF" stop-opacity="0"/></linearGradient><linearGradient id="iVoWsud" x1="16.976" x2="12.274" y1="8.835" y2="19.589" gradientUnits="userSpaceOnUse"><stop stop-color="#352260"/><stop offset="1" stop-color="#39268E"/></linearGradient><linearGradient id="i2jQPFe" x1="23.75" x2="10.375" y1="6.797" y2="22.234" gradientUnits="userSpaceOnUse"><stop stop-color="#CCCFF7"/><stop offset="1" stop-color="#BDC2FF"/></linearGradient><linearGradient id="if6cybb" x1="15.323" x2="16.881" y1="12.034" y2="12.034" gradientUnits="userSpaceOnUse"><stop stop-color="#D6D8FF"/><stop offset="1" stop-color="#E7EAFF"/></linearGradient><linearGradient id="ieRjgLK" x1="16.85" x2="16.806" y1="16.832" y2="21.605" gradientUnits="userSpaceOnUse"><stop stop-color="#D6D8FF"/><stop offset="1" stop-color="#E7EAFF"/></linearGradient><radialGradient id="ikKv1ad" cx="0" cy="0" r="1" gradientTransform="matrix(-2.17807 2.57932 -3.57188 -3.01623 29.62 14.952)" gradientUnits="userSpaceOnUse"><stop stop-color="#28A1FA"/><stop offset="1" stop-color="#1F6DFF"/></radialGradient><radialGradient id="i2E1e9b" cx="0" cy="0" r="1" gradientTransform="matrix(0 2.21629 -.38212 0 29.105 14.818)" gradientUnits="userSpaceOnUse"><stop stop-color="#5CC2FF"/><stop offset="1" stop-color="#5CC2FF" stop-opacity="0"/></radialGradient><radialGradient id="i3Ksbld" cx="0" cy="0" r="1" gradientTransform="matrix(0 9 -9 0 16 16)" gradientUnits="userSpaceOnUse"><stop offset=".901" stop-color="#50369C"/><stop offset="1" stop-color="#3B2862"/></radialGradient><radialGradient id="iQ7p6Gb" cx="0" cy="0" r="1" gradientTransform="rotate(111.124 3.325 13.364)scale(2.7455)" gradientUnits="userSpaceOnUse"><stop offset=".701" stop-color="#DDBD3D"/><stop offset="1" stop-color="#CAA742"/></radialGradient><filter id="iNvDOyc" width="7.789" height="13.03" x="9.937" y="8.085" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_13286" stdDeviation=".375"/></filter><filter id="iL5ySAN" width="24.35" height="24.15" x="3.85" y="4" 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=".2"/><feGaussianBlur stdDeviation=".2"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.607843 0 0 0 0 0.615686 0 0 0 0 0.729412 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_13286"/><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=".15"/><feGaussianBlur stdDeviation=".15"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.894118 0 0 0 0 0.898039 0 0 0 0 0.968627 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_13286" result="effect2_innerShadow_18_13286"/></filter></defs></g></svg>Watch アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-emoji:watch" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-emoji:watch" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-emoji:watch" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-emoji--watch]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-emoji -->
<div class="i-fluent-emoji:watch"></div>Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-emoji:watch"></iconify-icon>HTML 画像
<img src="https://iconyz.com/api/public/svg/fluent-emoji/watch.svg" alt="Watch アイコン" width="24" height="24">他のアイコンセットの Watch アイコン
Watch アイコン のよくある質問
Watch アイコンは商用利用でも無料ですか?
はい。Fluent Emoji icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Watch アイコンを使うには?
@iconify/react をインストールして <Icon icon="fluent-emoji:watch" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Watch アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/fluent-emoji/watch.svg" alt="Watch アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。