Cycle Rounded アイコン
material-symbols-light:cycle-rounded
Cycle Rounded アイコン(material-symbols-light:cycle-rounded)は、Material Symbols Light セットの無料 SVG アイコンです（作者: Google）。 24 × 24 のグリッドで描かれています。 Material Symbols Light icons は Apache 2.0 ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
- アイコンセット
- Material Symbols Light
- 作者
- ライセンス
- Apache-2.0
- サイズ
- 24 × 24
- カテゴリ
- UI 操作
- タグ
- cyclerounded、cycle outline rounded
SVG コード
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M4.039 12.006q0 2.471 1.399 4.488T9.142 19.4q.235.09.344.286t.004.372q-.123.202-.352.266t-.451-.02Q6.112 19.3 4.566 17.029t-1.547-5.042q0-.785.136-1.554q.136-.77.42-1.51L1.827 9.931q-.177.11-.375.055t-.302-.232t-.049-.378t.232-.305l2.775-1.596q.292-.161.618-.078q.326.084.488.376l1.595 2.75q.104.177.05.378q-.055.201-.232.305t-.378.049t-.305-.232L4.691 8.875q-.333.739-.493 1.53q-.16.793-.16 1.6M12 4.02q-1.352 0-2.611.455t-2.314 1.3q-.183.142-.403.128t-.324-.191q-.129-.208-.061-.438t.255-.378q1.183-.919 2.565-1.398t2.874-.479q1.956 0 3.7.786q1.746.786 3.036 2.262V3.981q0-.214.144-.357t.356-.143t.357.143t.143.357v3.192q0 .348-.23.578t-.577.23h-3.193q-.213 0-.356-.143t-.144-.357t.144-.357t.356-.143h2.475q-1.13-1.425-2.755-2.193T12 4.018m5.973 13.256q1.22-1.388 1.69-3.136q.471-1.748.125-3.545q-.038-.232.086-.423t.338-.19q.251 0 .414.19t.201.443q.327 1.894-.176 3.743t-1.747 3.341q-.995 1.204-2.332 1.994q-1.338.79-2.874 1.087l1.73.996q.178.104.23.305q.052.2-.052.378q-.104.177-.302.229t-.375-.052l-2.762-1.616q-.292-.161-.376-.487q-.083-.326.078-.618l1.597-2.737q.103-.177.301-.229q.199-.052.375.052q.177.104.232.305t-.049.378l-1.31 2.228q1.445-.2 2.726-.868t2.232-1.768"/></svg>Cycle Rounded アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="material-symbols-light:cycle-rounded" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="material-symbols-light:cycle-rounded" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="material-symbols-light:cycle-rounded" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[material-symbols-light--cycle-rounded]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/material-symbols-light -->
<div class="i-material-symbols-light:cycle-rounded"></div>Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="material-symbols-light:cycle-rounded"></iconify-icon>HTML 画像
<img src="https://iconyz.com/api/public/svg/material-symbols-light/cycle-rounded.svg" alt="Cycle Rounded アイコン" width="24" height="24">Material Symbols Light の関連アイコン
他のアイコンセットの Cycle Rounded アイコン
Cycle Rounded アイコン のよくある質問
Cycle Rounded アイコンは商用利用でも無料ですか?
はい。Material Symbols Light icons は Apache 2.0 ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Cycle Rounded アイコンを使うには?
@iconify/react をインストールして <Icon icon="material-symbols-light:cycle-rounded" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Cycle Rounded アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/material-symbols-light/cycle-rounded.svg" alt="Cycle Rounded アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。