Gear アイコン

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

はい。Codicons は CC BY 4.0 ライセンス で公開されています。作者のクレジットを表記すれば、個人・商用プロジェクトで利用できます。

codicon:gear

Gear アイコン(codicon:gear)は、Codicons セットの無料 SVG アイコンです（作者: Microsoft Corporation）。 24 × 24 のグリッドで描かれています。 Codicons は CC BY 4.0 ライセンスで公開されています。作者のクレジットを表記すれば、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。

アイコンセット: Codicons
作者: Microsoft Corporation
ライセンス: CC-BY-4.0
サイズ: 24 × 24

SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M8 6a2 2 0 1 0-.001 3.999A2 2 0 0 0 8 6m0 3a1 1 0 1 1 0-2a1 1 0 0 1 0 2m6.565.715l-1.286-1.087a.82.82 0 0 1 0-1.256l1.286-1.087a.41.41 0 0 0 .126-.441a7 7 0 0 0-1.472-2.536a.42.42 0 0 0-.446-.112l-1.587.565a.8.8 0 0 1-.279.049a.826.826 0 0 1-.813-.676l-.303-1.652a.41.41 0 0 0-.321-.329a7.1 7.1 0 0 0-2.939 0a.41.41 0 0 0-.321.329l-.302 1.652a.827.827 0 0 1-1.092.628l-1.587-.565a.42.42 0 0 0-.446.112A7 7 0 0 0 1.31 5.845a.41.41 0 0 0 .126.441l1.286 1.087a.82.82 0 0 1 0 1.256L1.436 9.716a.41.41 0 0 0-.126.441a7 7 0 0 0 1.473 2.536a.42.42 0 0 0 .446.112l1.587-.565a.8.8 0 0 1 .279-.048c.392 0 .74.278.813.676l.302 1.652c.03.164.157.294.321.329q.722.153 1.47.153q.749 0 1.469-.153a.41.41 0 0 0 .321-.329l.303-1.652a.827.827 0 0 1 1.092-.628l1.586.565a.42.42 0 0 0 .446-.112a7 7 0 0 0 1.472-2.536a.41.41 0 0 0-.126-.441zm-1.837 2.011l-1.207-.43a1.83 1.83 0 0 0-2.41 1.39l-.23 1.251a6.2 6.2 0 0 1-1.761-.001l-.229-1.251a1.825 1.825 0 0 0-2.411-1.39l-1.207.43a6 6 0 0 1-.879-1.511l.974-.823c.373-.315.6-.757.64-1.243a1.81 1.81 0 0 0-.64-1.54l-.974-.823a6 6 0 0 1 .879-1.511l1.207.43q.298.106.614.106a1.83 1.83 0 0 0 1.797-1.496l.229-1.251a6.2 6.2 0 0 1 1.761-.001l.229 1.251a1.825 1.825 0 0 0 2.411 1.39l1.207-.43q.553.692.879 1.511l-.973.823a1.8 1.8 0 0 0-.64 1.243a1.8 1.8 0 0 0 .641 1.54l.974.823a6 6 0 0 1-.879 1.511z"/></svg>

Gear アイコンの使い方

React

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

<Icon icon="codicon:gear" width="24" />

Vue

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

<template>
  <Icon icon="codicon:gear" width="24" />
</template>

Svelte

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

<Icon icon="codicon:gear" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[codicon--gear]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/codicon -->
<div class="i-codicon:gear"></div>

Web コンポーネント

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

<iconify-icon icon="codicon:gear"></iconify-icon>

HTML 画像

<img src="https://iconyz.com/api/public/svg/codicon/gear.svg" alt="Gear アイコン" width="24" height="24">

Codicons の関連アイコン

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

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

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

はい。Codicons は CC BY 4.0 ライセンスで公開されています。作者のクレジットを表記すれば、個人・商用プロジェクトで利用できます。

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

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

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

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

Codicons をすべて見る →