ICONYZ
日本語
Fluent UI System Color Icons の Arrow Clockwise Dashes Settings 28 アイコン

Arrow Clockwise Dashes Settings 28 アイコン

fluent-color:arrow-clockwise-dashes-settings-28

Arrow Clockwise Dashes Settings 28 アイコン(fluent-color:arrow-clockwise-dashes-settings-28)は、Fluent UI System Color Icons セットの無料 SVG アイコンです(作者: Microsoft Corporation)。 28 × 28 のグリッドで描かれています。 Fluent UI System Color Icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。

アイコンセット
Fluent UI System Color Icons
作者
Microsoft Corporation
ライセンス
MIT
サイズ
28 × 28
タグ
arrowclockwise、clockwisedashes、dashessettings、arrowclockwisedashessettings、dash、setting
SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><g fill="none"><path fill="url(#SVGNfWBgcVk)" d="M23 4a1 1 0 1 0-2 0v1.513A10.96 10.96 0 0 0 16.096 3.2c-.583-.113-1.096.357-1.096.95c0 .515.39.942.893 1.05c1.404.3 2.687.928 3.765 1.8H18a1 1 0 1 0 0 2h4a1 1 0 0 0 1-1zm-11.093-.8c.583-.113 1.094.357 1.094.95c0 .515-.389.942-.892 1.05a9 9 0 0 0-2.99 1.238c-.432.28-1.008.253-1.372-.11c-.42-.42-.39-1.115.102-1.448a10.9 10.9 0 0 1 4.058-1.68M9.118 21.561c-.432-.28-1.008-.253-1.372.11c-.42.42-.39 1.115.102 1.447a10.9 10.9 0 0 0 4.06 1.682c.582.113 1.093-.357 1.093-.951c0-.515-.389-.941-.892-1.05a9 9 0 0 1-2.99-1.238m-3.917-5.67c-.108-.504-.535-.893-1.05-.893c-.593 0-1.063.511-.95 1.094a10.9 10.9 0 0 0 1.684 4.065c.333.491 1.026.52 1.446.101c.364-.364.39-.94.111-1.373a9 9 0 0 1-1.241-2.994m1.242-6.779c.28-.432.253-1.008-.111-1.372c-.42-.42-1.114-.39-1.446.1A10.9 10.9 0 0 0 3.2 11.906c-.113.583.357 1.094.95 1.094c.516 0 .942-.39 1.05-.893a9 9 0 0 1 1.242-2.993"/><path fill="url(#SVGzOLtpe9E)" d="M23 4a1 1 0 1 0-2 0v1.513A10.96 10.96 0 0 0 16.096 3.2c-.583-.113-1.096.357-1.096.95c0 .515.39.942.893 1.05c1.404.3 2.687.928 3.765 1.8H18a1 1 0 1 0 0 2h4a1 1 0 0 0 1-1zm-11.093-.8c.583-.113 1.094.357 1.094.95c0 .515-.389.942-.892 1.05a9 9 0 0 0-2.99 1.238c-.432.28-1.008.253-1.372-.11c-.42-.42-.39-1.115.102-1.448a10.9 10.9 0 0 1 4.058-1.68M9.118 21.561c-.432-.28-1.008-.253-1.372.11c-.42.42-.39 1.115.102 1.447a10.9 10.9 0 0 0 4.06 1.682c.582.113 1.093-.357 1.093-.951c0-.515-.389-.941-.892-1.05a9 9 0 0 1-2.99-1.238m-3.917-5.67c-.108-.504-.535-.893-1.05-.893c-.593 0-1.063.511-.95 1.094a10.9 10.9 0 0 0 1.684 4.065c.333.491 1.026.52 1.446.101c.364-.364.39-.94.111-1.373a9 9 0 0 1-1.241-2.994m1.242-6.779c.28-.432.253-1.008-.111-1.372c-.42-.42-1.114-.39-1.446.1A10.9 10.9 0 0 0 3.2 11.906c-.113.583.357 1.094.95 1.094c.516 0 .942-.39 1.05-.893a9 9 0 0 1 1.242-2.993"/><path fill="url(#SVG2HEkkbfr)" d="M16.796 16.699a2 2 0 0 1-1.441 2.496l-1.024.253a6.8 6.8 0 0 0 .008 2.152l.976.235a2 2 0 0 1 1.45 2.51l-.324 1.098c.518.46 1.11.835 1.753 1.1l.843-.886a2 2 0 0 1 2.899 0l.85.895a6.2 6.2 0 0 0 1.751-1.09l-.335-1.16a2 2 0 0 1 1.441-2.495l1.026-.254a6.8 6.8 0 0 0-.008-2.152l-.977-.235a2 2 0 0 1-1.45-2.51l.324-1.1a6.2 6.2 0 0 0-1.753-1.1l-.843.888a2 2 0 0 1-2.9 0l-.849-.895a6.2 6.2 0 0 0-1.751 1.09zM20.5 22a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3"/><defs><linearGradient id="SVGNfWBgcVk" x1="6.06" x2="5.083" y1="3" y2="30.988" gradientUnits="userSpaceOnUse"><stop stop-color="#0fafff"/><stop offset=".923" stop-color="#0067bf"/></linearGradient><linearGradient id="SVGzOLtpe9E" x1="13.092" x2="18.483" y1=".403" y2="37.152" gradientUnits="userSpaceOnUse"><stop stop-color="#885edb" stop-opacity="0"/><stop offset="1" stop-color="#e362f8"/></linearGradient><linearGradient id="SVG2HEkkbfr" x1="23.624" x2="17.078" y1="26.084" y2="15.099" gradientUnits="userSpaceOnUse"><stop stop-color="#70777d"/><stop offset="1" stop-color="#b9c0c7"/></linearGradient></defs></g></svg>

Arrow Clockwise Dashes Settings 28 アイコンの使い方

React

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

<Icon icon="fluent-color:arrow-clockwise-dashes-settings-28" width="24" />

Vue

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

<template>
  <Icon icon="fluent-color:arrow-clockwise-dashes-settings-28" width="24" />
</template>

Svelte

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

<Icon icon="fluent-color:arrow-clockwise-dashes-settings-28" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-color--arrow-clockwise-dashes-settings-28]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/fluent-color -->
<div class="i-fluent-color:arrow-clockwise-dashes-settings-28"></div>

Web コンポーネント

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

<iconify-icon icon="fluent-color:arrow-clockwise-dashes-settings-28"></iconify-icon>

HTML 画像

<img src="https://iconyz.com/api/public/svg/fluent-color/arrow-clockwise-dashes-settings-28.svg" alt="Arrow Clockwise Dashes Settings 28 アイコン" width="24" height="24">

Fluent UI System Color Icons の関連アイコン

Arrow Clockwise Dashes Settings 28 アイコン のよくある質問

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

はい。Fluent UI System Color Icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。

React で Arrow Clockwise Dashes Settings 28 アイコンを使うには?

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

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

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

Fluent UI System Color Icons をすべて見る →