solid
1. カラー
新しい色を選択するまで、アイコンの元の色がそのまま保持されます。
2. キャンバス背景と変形
3. ベクターアニメーションのプリセット
SVG書き出しに含まれます
Variable SVGアイコン
出典、作者、ライセンスはプレビューとアイコン詳細で確認できます。 Variable - 商用利用も個人利用も無料. 登録不要 | 100%ブラウザ完結処理
開発者とUIフレームワーク向けのクイックコピー
コードのリアルタイム出力
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" width="36" height="36" role="img" aria-label="Variable icon"><title>Variable - Heroicons icon</title><desc>Free Variable vector icon from the Heroicons open-source icon library; solid style, MIT licence, viewBox 0 0 16 16, 833 bytes.</desc> <path d="M3.38 3.012a.75.75 0 1 0-1.408-.516A15.97 15.97 0 0 0 1 8c0 1.932.343 3.786.972 5.503a.75.75 0 0 0 1.408-.516A14.47 14.47 0 0 1 2.5 8c0-1.754.311-3.434.88-4.988ZM12.62 3.012a.75.75 0 1 1 1.408-.516A15.97 15.97 0 0 1 15 8a15.97 15.97 0 0 1-.972 5.503.75.75 0 0 1-1.408-.516c.569-1.554.88-3.233.88-4.987s-.311-3.434-.88-4.988ZM6.523 4.785a.75.75 0 0 1 .898.38l.758 1.515.812-.902a2.376 2.376 0 0 1 2.486-.674.75.75 0 1 1-.454 1.429.876.876 0 0 0-.918.249L8.9 8.122l.734 1.468.388-.124a.75.75 0 0 1 .457 1.428l-1 .32a.75.75 0 0 1-.899-.379L7.821 9.32l-.811.901a2.374 2.374 0 0 1-2.489.673.75.75 0 0 1 .458-1.428.874.874 0 0 0 .916-.248L7.1 7.878 6.366 6.41l-.389.124a.75.75 0 1 1-.454-1.43l1-.318Z"/> </svg>
AIプロンプトとベクター改善
このアイコンを改善または作り変えますか？ Variable
精密な設計プロンプトを作るか、キャンバス上のアイコンを今すぐ改善できます。 Variable
プロンプト作成は100%ブラウザ内
出典とライセンスの確認
LICENSE.txt
Library: Heroicons | Author: Tailwind Labs | License: MIT | Source: https://github.com/tailwindlabs/heroicons | 登録不要 | 100%ブラウザ完結処理
キーワード
#heroicons
#16px
#solid
#variable
#interface
#hero
Variable - ベクターの技術仕様
出典、作者、ライセンスはプレビューとアイコン詳細で確認できます。 Variable
| 正規の識別子 | heroicons/heroicons-16px-solid-variable |
|---|---|
| 元のライブラリパック | Heroicons |
| 座標グリッドと viewBox | viewBox="0 0 16 16" |
| 非圧縮のサイズ | 1,072 bytes (~590 bytes gzipped) |
| SPDXライセンスと商用利用 | MIT - 商用利用も無料 |
| Upstream Source | https://github.com/tailwindlabs/heroicons |
| 対応する書き出し形式 | SVG, PNG (32px-2048px), WebP, ICO, React TSX, Vue 3, Svelte, Tailwind CSS, CSS Mask, Base64 |
| 安全とプライバシーの保証 | 登録不要 | 100%ブラウザ完結処理 |
このアイコンの使い方と調整方法: Variable
- 見た目を調整する: カラー, 自動（線と塗り）, 線の太さ (
0.5px-4px), ベクターアニメーションのプリセット - ベクターまたは画像を保存する: SVGをダウンロード, PNG（透明）, WebP（最適化） (
2048x2048 px) - フレームワークのコードをコピーする: React、Next.js、Vue 3、Svelte、Angular、HTML、CSSマスク用のコードをそのままコピーできます。
- 高度なベクター編集: SVGエディターで編集 (76,166)
アクセシビリティのヒント (WCAG 2.1): 飾りのアイコンは aria-hidden と focusable false で隠します。アイコンだけのボタンには分かりやすい aria-label を付けます。右から左に書く言語では矢印を左右反転します。
heroicons-16px-solid-variable.svg aria-hidden="true" focusable="false"
同じカテゴリの ユーザーインターフェース
見る
outline
Events Stage 04
Domain Icons|interface
outline
Outline Text Quote
Lucide|interface
outline
Outline Braces
Tabler Icons|interface
outline
Outline Tornado
Lucide|interface
outline
Outline Transgender
Lucide|interface
Duotone Boat Duotone
Phosphor Icons|interface
Page
IconPark|interface
Regular Record Circle
Bootstrap Icons|interface
Party Balloon
IconPark|interface
Pentagon One
IconPark|interface
Regular Sign Turn Slight Left
Bootstrap Icons|interfaceさらに見る
よくある質問
Variable - よくある質問
Variableにはどのライセンスが適用されますか？ +
VariableはHeroiconsのもので、MITの対象です。帰属表示：クレジット必須。
Variableはどの形式でダウンロードできますか？ +
Variableはsolidスタイルのベクターです（viewBox 0 0 16 16）。SVG、PNG、WebP、ICOをダウンロードするか、このページからReact TSX、Vue 3、Svelte、Tailwind CSS、CSS Mask、Base64コードをコピーできます。
Variableアイコンはどこから来たのですか？ +
VariableはHeroiconsライブラリの一部です。作者はTailwind Labs、カテゴリはユーザーインターフェースです。ライセンス全文は、このページにリンクされたライブラリ通知ファイルにあります。
100%ブラウザ完結処理 | 76,166 アイコン
SVGエディター
パス、レイヤー、色、アニメーションをブラウザで編集し、整ったSVG、PNG、またはフレームワークのコードを書き出せます。