Traffic Light アイコン
si-glyph:traffic-light
Traffic Light アイコン(si-glyph:traffic-light)は、SmartIcons Glyph セットの無料 SVG アイコンです（作者: SmartIcons）。 16 × 24 のグリッドで描かれています。 SmartIcons Glyph icons は CC BY SA 4.0 ライセンス で公開されています。作者のクレジットを表記し、アイコンへの変更を同じライセンスで共有すれば、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
- アイコンセット
- SmartIcons Glyph
- 作者
- SmartIcons
- ライセンス
- CC-BY-SA-4.0
- サイズ
- 16 × 24
- タグ
- trafficlight
SVG コード
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="24" viewBox="0 0 16 24"><path fill="currentColor" fill-rule="evenodd" d="M9.671.017H7.296C6.578.017 6 .608 6 1.334v10.342c0 .727.578 1.317 1.296 1.317h2.375c.717 0 1.297-.591 1.297-1.317V1.334c0-.727-.58-1.317-1.297-1.317m-1.167 11.99a1.536 1.536 0 0 1-1.539-1.534c0-.846.69-1.535 1.539-1.535a1.535 1.535 0 1 1 0 3.069m.01-4.008a1.53 1.53 0 0 1-1.528-1.534a1.53 1.53 0 1 1 3.059 0c0 .847-.683 1.534-1.531 1.534m-.022-4.006c-.805 0-1.461-.668-1.461-1.491s.656-1.494 1.461-1.494c.812 0 1.464.67 1.464 1.494c0 .823-.652 1.491-1.464 1.491m4.149-.014h.524c.337 0 1.811-2.194 1.811-2.194c0-.418-.274-.76-.611-.76h-1.724c-.338 0-.611.342-.611.76v1.434c-.001.419.273.76.611.76m1.723 1.04h-1.726c-.336 0-.609.339-.609.756v1.423c0 .418.273.756.609.756h.524c.337 0 1.812-2.179 1.812-2.179c.001-.418-.275-.756-.61-.756m-.02 4.014h-1.725c-.336 0-.61.342-.61.761v1.433c0 .422.274.761.61.761h.525c.336 0 1.811-2.193 1.811-2.193c0-.42-.274-.762-.611-.762M4.355 1.024H2.64c-.334 0-.605.337-.605.749c0 0 1.463 2.163 1.799 2.163h.521c.335 0 .605-.337.605-.749V1.773c.001-.412-.27-.749-.605-.749m.02 4.015H2.66c-.334 0-.605.339-.605.756c0 0 1.463 2.178 1.799 2.178h.521c.334 0 .605-.338.605-.756V5.795c0-.417-.271-.756-.605-.756m.002 4.015H2.661c-.334 0-.606.332-.606.739c0 0 1.463 2.131 1.799 2.131h.523c.334 0 .604-.33.604-.739V9.793c0-.407-.27-.739-.604-.739M7 13h2.973v3.128H7z"/></svg>
Traffic Light アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="si-glyph:traffic-light" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="si-glyph:traffic-light" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="si-glyph:traffic-light" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[si-glyph--traffic-light]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/si-glyph -->
<div class="i-si-glyph:traffic-light"></div>
Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="si-glyph:traffic-light"></iconify-icon>
HTML 画像
<img src="https://iconyz.com/api/public/svg/si-glyph/traffic-light.svg" alt="Traffic Light アイコン" width="24" height="24">
他のアイコンセットの Traffic Light アイコン
Traffic Light アイコン のよくある質問
Traffic Light アイコンは商用利用でも無料ですか?
はい。SmartIcons Glyph icons は CC BY SA 4.0 ライセンス で公開されています。作者のクレジットを表記し、アイコンへの変更を同じライセンスで共有すれば、個人・商用プロジェクトで利用できます。
React で Traffic Light アイコンを使うには?
@iconify/react をインストールして <Icon icon="si-glyph:traffic-light" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Traffic Light アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/si-glyph/traffic-light.svg" alt="Traffic Light アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。
SmartIcons Glyph アイコン をすべて見る →
ICONYZ
