ICONYZ
日本語
Material Design Light の Settings アイコン

Settings アイコン

mdi-light:settings

Settings アイコン(mdi-light:settings)は、Material Design Light セットの無料 SVG アイコンです(作者: Pictogrammers)。 24 × 24 のグリッドで描かれています。 Material Design Light icons は Open Font License で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。

アイコンセット
Material Design Light
作者
Pictogrammers
ライセンス
OFL-1.1
サイズ
24 × 24
タグ
setting
SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m19.59 15.5l-1.82-1.3c.3-1.08.32-2.25 0-3.42l1.82-1.28L18.14 7l-2.03.92c-.79-.8-1.79-1.42-2.96-1.71L12.95 4h-2.9l-.2 2.21c-1.17.29-2.17.91-2.96 1.71L4.86 7L3.41 9.5l1.82 1.28c-.32 1.17-.3 2.34 0 3.42l-1.82 1.3L4.86 18l2.03-.93c.79.79 1.79 1.39 2.96 1.7l.2 2.23h2.9l.2-2.23c1.17-.31 2.17-.91 2.96-1.7l2.03.93zM13.5 3c.27 0 .5.2.5.46l.18 2.04c.76.28 1.44.69 2.05 1.18l1.85-.87c.23-.12.52-.04.66.19l2 3.5c.14.21.06.5-.16.65l-1.67 1.17c.13.8.12 1.59 0 2.36l1.67 1.17c.22.15.3.44.16.65l-2 3.5c-.14.21-.43.29-.66.17l-1.85-.86c-.61.49-1.29.89-2.05 1.19l-.18 2c0 .29-.23.5-.5.5h-4a.5.5 0 0 1-.5-.5l-.18-2c-.76-.3-1.44-.7-2.05-1.19l-1.85.86c-.23.12-.52.04-.66-.17l-2-3.5c-.14-.21-.06-.5.16-.65l1.67-1.17c-.12-.77-.13-1.56 0-2.36l-1.67-1.17c-.22-.15-.3-.44-.16-.65l2-3.5c.14-.23.43-.31.66-.19l1.85.87c.61-.49 1.29-.9 2.05-1.18L9 3.46c0-.26.23-.46.5-.46zm-2 6a3.5 3.5 0 0 1 3.5 3.5a3.5 3.5 0 0 1-3.5 3.5A3.5 3.5 0 0 1 8 12.5A3.5 3.5 0 0 1 11.5 9m0 1A2.5 2.5 0 0 0 9 12.5a2.5 2.5 0 0 0 2.5 2.5a2.5 2.5 0 0 0 2.5-2.5a2.5 2.5 0 0 0-2.5-2.5"/></svg>

Settings アイコンの使い方

React

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

<Icon icon="mdi-light:settings" width="24" />

Vue

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

<template>
  <Icon icon="mdi-light:settings" width="24" />
</template>

Svelte

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

<Icon icon="mdi-light:settings" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[mdi-light--settings]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/mdi-light -->
<div class="i-mdi-light:settings"></div>

Web コンポーネント

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

<iconify-icon icon="mdi-light:settings"></iconify-icon>

HTML 画像

<img src="https://iconyz.com/api/public/svg/mdi-light/settings.svg" alt="Settings アイコン" width="24" height="24">

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

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

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

はい。Material Design Light icons は Open Font License で公開されており、個人・商用プロジェクトで利用できます。

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

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

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

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

Material Design Light アイコン をすべて見る →