Metro アイコン
fluent-emoji-high-contrast:metro
Metro アイコン(fluent-emoji-high-contrast:metro)は、Fluent Emoji High Contrast セットの無料 SVG アイコンです（作者: Microsoft Corporation）。 32 × 32 のグリッドで描かれています。 Fluent Emoji High Contrast icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
- アイコンセット
- Fluent Emoji High Contrast
- 作者
- 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="currentColor"><path d="M10.803 24.007c.06-.103.243-.406.304-.506c.077-.125.433-.5.885-.5h8.017c.395 0 .69.23.872.5c.101.149.184.307.238.41c.024.045.042.08.053.096zM9.5 25.998c.058-.077.195-.266.28-.405c.105-.173.617-.596 1.07-.596h10.548c.212 0 .525.118.665.328c.077.115.374.564.444.673zM12 6.5c0 .28.22.5.5.5h7c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-7c-.28 0-.5.22-.5.5m10.01 8.54c-.003.35-.095.677-.254.96h1.234v3.24c0 1.516-1.24 2.76-2.81 2.76h-8.37C10.248 22 9 20.754 9 19.24V16h1.252a1.95 1.95 0 0 1-.252-.96V9.95c0-1.08.88-1.96 1.96-1.96h8.09c1.08 0 1.96.88 1.96 1.96zm-9.54.96h7.07c.81 0 1.46-.65 1.47-1.47v-4.07c0-.81-.66-1.47-1.47-1.47h-7.07c-.81 0-1.47.66-1.47 1.47v4.07c0 .81.66 1.47 1.47 1.47M11 20h2c.56 0 1-.44 1-1c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1m8 0h2c.56 0 1-.44 1-1c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1"/><path d="M30 16c0 3.79-1.51 7.23-3.97 9.76c-.39.4-.8.78-1.24 1.13A13.93 13.93 0 0 1 16 30c-3.32 0-6.38-1.16-8.79-3.11c-.44-.35-.85-.73-1.24-1.13A13.95 13.95 0 0 1 2 16C2 8.27 8.27 2 16 2s14 6.27 14 14m-6-9.21A1.8 1.8 0 0 0 22.189 5H9.81A1.8 1.8 0 0 0 8 6.79v12.45c0 1.36.731 2.549 1.825 3.209c-.651 1-1.897 2.921-2.04 3.169l-.069.116c-.182.3-.409.672-.162 1.097c.266.46.848.454 1.018.453h14.832c.318 0 .703-.02.954-.347c.25-.327.27-.722-.068-1.261c-.262-.42-1.484-2.28-2.108-3.229A3.74 3.74 0 0 0 24 19.24z"/></g></svg>
Metro アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-emoji-high-contrast:metro" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-emoji-high-contrast:metro" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-emoji-high-contrast:metro" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-emoji-high-contrast--metro]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-emoji-high-contrast -->
<div class="i-fluent-emoji-high-contrast:metro"></div>
Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-emoji-high-contrast:metro"></iconify-icon>
HTML 画像
<img src="https://iconyz.com/api/public/svg/fluent-emoji-high-contrast/metro.svg" alt="Metro アイコン" width="24" height="24">
Metro アイコン のよくある質問
Metro アイコンは商用利用でも無料ですか?
はい。Fluent Emoji High Contrast icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Metro アイコンを使うには?
@iconify/react をインストールして <Icon icon="fluent-emoji-high-contrast:metro" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Metro アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/fluent-emoji-high-contrast/metro.svg" alt="Metro アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。
Fluent Emoji High Contrast アイコン をすべて見る →
ICONYZ
