クイックスタート

小さな動きを、簡単な三つの手順で。

01 / アイコンを探す

コレクションを見る. 名前やタグで検索し、カテゴリ、出典、動きで絞り込めます。コレクションのプレビューはいつでも停止できます。

アイコンを開いて、色、サイズ、線の太さ、再生時間、遅延、速度の変化、繰り返し回数、方向、動きの強さを調整します。再生、停止、最初から再生、スライダーで結果を確認できます。最後の設定はブラウザーに保存されます。アカウントなしで設定を含むリンクを共有できます。

SVG をコピーして HTML に貼り付けるか、.svg をダウンロードして単独ファイルとして使います。ファイルにはアニメーションのスタイルが含まれ、JavaScript、ライブラリ、外部リソースは不要です。

<img src="/icons/bell-ring.svg"
     width="32" height="32"
     alt="Notifications" />

テキストの隣の装飾画像には空の alt="" を指定してください。装飾用インライン SVG では role と aria-labelledby を削除し、aria-hidden="true" を追加してください。

すべての出力は prefers-reduced-motion に対応します。システムが動きを減らす設定の場合、編集ツールは停止した状態で始まります。確認するには再生を押してください。完了の通知には一回の再生、注意を促す場合は有限回の繰り返しを使いましょう。

アイコンと設定ごとにスタイルの適用範囲を分けています。同じ出力を一つの文書に何度も貼り付ける場合、SVG とタイトルに固有の ID を付け、CSS セレクターと aria-labelledby を更新してください。画像要素では各ファイルが自動的に分離されます。

50 個すべてのアイコンに出典とライセンスを記載しています。出典コレクションで制作者と使用条件を確認してください。ダウンロードした SVG にも同じ情報を含めています。出典 · ライセンス