基本の流れ
- 一覧からアイコンをクリックして選ぶ
- 左の設定パネルで色・書き出しサイズ・速さ・ループ回数を決める
- 「アニメSVG」「静止SVG」「PNG」のいずれかでダウンロードする
一覧のカードは画面に入ると3回だけ再生されて止まります。もう一度見たいときはカードにマウスを乗せるか、 「すべて再生」を押してください。
3つの形式の使い分け
| 形式 | 動き | 向いている用途 |
|---|---|---|
| アニメSVG | 動く | 自分でファイルを置けるサイト。1KB前後と軽く、拡大しても劣化しません |
| 静止SVG | 動かない | デザインツールへの読み込み、印刷物。ベクターのまま編集できます |
| PNG | 動かない | SVGが使えない環境。背景は透過しています |
アニメSVGの貼り方
ダウンロードしたファイルをサーバーに置き、img 要素で読み込むだけで動きます。
<img src="/assets/check-animated.svg" alt="" width="48" height="48">
動きの情報はファイルの中に入っているので、外部のCSSやJavaScriptを追加する必要はありません。
CSSの background-image から読み込んでも動きます。
WordPressで使う場合
WordPressは標準ではSVGのアップロードを許可していません。 SVG内にスクリプトを書き込めてしまうためで、セキュリティ上の仕様です。使いたい場合は次のいずれかが必要です。
- Safe SVG などのプラグインを導入する
- テーマの
functions.phpでupload_mimesにSVGを追加する
設定を変更できない場合は、PNGをご利用ください（動きはありません）。
ライセンス
本ツールで生成したアイコンは、個人・商用を問わず無料でご利用いただけます。
- ✅ 商用利用可
- ✅ クレジット表記不要
- ✅ 改変可（色・サイズ・形状の変更）
- ❌ アイコンそのものを素材集としてまとめ、再配布・販売する行為は禁止
禁止しているのは「アイコン自体を商品として配る・売る」ことだけです。 制作物に組み込んで納品したり、自社サービスで使ったりすることは問題ありません。
よくある質問
アイコンの色は変えられますか？
設定パネルの「アイコンの色」で変更でき、書き出すファイルにもそのまま反映されます。
ダウンロード後にSVGをテキストエディタで開き、stroke と color の値を書き換えても変更できます。
ループ回数や速さは書き出したファイルにも反映されますか？
反映されます。設定した内容はアニメSVGのCSSに書き込まれるため、貼り付けた先でも同じように動きます。 なお一覧のカードは、設定に関わらず3回で停止します。
線の太さは変えられますか？
ツール上では変更できませんが、ダウンロードしたSVGの stroke-width="2" を書き換えれば調整できます。
アイコンは今後増えますか？
順次追加していく予定です。追加されたアイコンも同じライセンスでご利用いただけます。
動きのあるアイコンではなく、CSSのコードが欲しいのですが
本ツールはファイルのダウンロードに特化しています。コードをコピーして使いたい場合は
CSSアニメーション ギャラリー や
CSSホバーエフェクト ギャラリー をご利用ください。
なお、ダウンロードしたアニメSVGをテキストエディタで開けば、中の @keyframes をそのまま読めます。