動くアイコンを無料でダウンロードできるツール｜アニメSVG・PNG対応

動くアイコン ジェネレーターとは、アニメーション付きのアイコンを色・サイズ・速さ・ループ回数まで指定して、SVGとPNGでそのままダウンロードできる無料ツールです。収録しているアイコンは12カテゴリ300種で、会員登録もインストールも要りません。

チェックマークがすっと描かれる、ベルが揺れる、読み込み中のリングが回る——こうした小さな動きは、あると画面の印象が変わります。ところが実際に用意しようとすると、アイコン素材サイトは静止画しか置いていない、動かすにはCSSやJavaScriptを自分で書く必要があるという段差にぶつかります。ライブラリを入れて設定を書き、動かない原因を切り分けて——という下ごしらえは、アイコンを1つ置きたいだけの場面には重すぎます。

この記事では、CodeQuest.workが公開している無料ツール「動くアイコン ジェネレーター」の使い方を、実際の操作の流れに沿って解説します。あわせて、ダウンロードしたアニメSVGがなぜ画像として貼るだけで動くのかという仕組みと、サイトへの貼り方、動かしすぎないための設計の考え方までまとめました。

動くアイコン ジェネレーターとは

動くアイコン ジェネレーターは、ブラウザだけで完結するアイコンの書き出しツールです。基本の流れは「選ぶ → 整える → ダウンロード」の3ステップだけで、一覧に並んだアイコンはその場で動いて確認できます。コードを書く必要はなく、手に入るのは完成したファイルそのものです。

似たジャンルのツールとの一番の違いは、渡されるのがコードではなくファイルであることです。CSSアニメーションのサンプル集は「コードをコピーして自分のHTMLに組み込む」形式ですが、このツールは動きの情報をファイルの中に閉じ込めた状態で書き出します。そのため、CSSファイルを触れないブログサービスや、記事本文に画像しか置けない環境でも、画像として貼るだけで動きます。

アイコンの生成もPNGへの変換もすべてブラウザの中で処理されるため、画像がサーバーへ送信されることはありません。回数制限もなく、必要なぶんだけ書き出せます。ライセンスは商用利用可・クレジット表記不要・改変自由で、禁止しているのはアイコンそのものを素材集としてまとめて再配布・販売することだけです。

このツールでできること

設定パネルで調整できる項目と、書き出せる形式は次のとおりです。

ここで押さえておきたいのは、速さとループ回数がプレビュー用の設定ではなく、書き出すファイルの中身そのものを変えるという点です。「ループ1回」を選んで書き出したアニメSVGは、貼り付けた先でも1回だけ再生して止まります。あとからCSSで制御し直す必要はありません。

設定はブラウザに保存されるため、次に開いたときも前回の色やサイズのまま続きから作業できます。初期状態に戻したいときは、設定パネルのリセットボタンを押してください。

使い方は3ステップ

1. 一覧からアイコンをクリックして選ぶ（カテゴリのタブと検索窓で絞り込める）
2. 設定パネルで色・書き出しサイズ・速さ・ループ回数を決める
3. 「アニメSVG」「静止SVG」「PNG」のいずれかのボタンでダウンロードする

一覧のカードは、画面に入ったタイミングで3回だけ再生されて止まります。300種すべてが同時に動き続けると目が休まらないため、あえて止める仕様にしてあります。もう一度見たいときはカードにマウスを乗せるか、一覧の上にある「すべて再生」を押してください。設定パネルのプレビューだけは、選んだループ回数のとおりに再生されます。

探し方は2通りあります。カテゴリのタブで絞り込む方法と、検索窓に言葉を入れる方法です。検索は日本語名と英語名の両方に対応しているため、「送信」でも「send」でも同じアイコンにたどり着けます。名前が思い浮かばないときはカテゴリから、名前が決まっているときは検索から入るのが早い進め方です。

収録アイコンの見取り図

アイコンは12のカテゴリに分かれています。どこに何があるかを先に把握しておくと、探す時間がかなり短くなります。

動きの語彙は、線を描く・回る・脈打つ・揺れる・弾む・点滅する・滑るの7種類に絞ってあります。カテゴリをまたいでも同じ質感で動くのはこのためで、1つの画面に複数のアイコンを並べてもばらつきません。逆に言えば、派手さで目を引くタイプの素材ではなく、UIの中に馴染ませて使うことを前提にした設計です。

アニメSVG・静止SVG・PNGの使い分け

3つの形式は用途がはっきり分かれています。迷ったときは、この表の「向いている場面」から選んでください。

アニメSVGの軽さは、実際に書き出してみると分かります。収録している300種の平均はおよそ1KB、もっとも小さいものは0.6KB弱で、複雑なもので3KB台です。ページ内に数個置いても表示速度への影響はほとんどありません。図形の座標と動きの指示だけを持つテキストファイルなので、同じ見た目をGIFや動画で用意した場合とは桁が変わります。

PNGを選ぶときは、表示したいサイズの2倍で書き出すのが基本です。48pxで表示するなら128px、128pxで表示するなら256pxを選んでおくと、高精細ディスプレイでも輪郭がぼやけません。SVGにはこの心配がなく、どこまで拡大しても線がなめらかなままです。

なぜ画像として貼るだけで動くのか

ダウンロードしたアニメSVGは、外部のCSSもJavaScriptも読み込まずに動きます。理由は単純で、動きの指示がファイルの中に書き込まれているからです。実際に書き出したチェックマークのアニメSVGは次のような中身になっています。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="#6366f1" color="#6366f1" width="128" height="128">
  <style>
    .p-ring {
      animation: kf-check-ring 1.10s ease-in-out infinite both;
    }
    .p-tick {
      animation: kf-check-tick 1.10s ease-in-out infinite both;
    }
    @keyframes kf-check-ring {
      0% { stroke-dashoffset: 1; }
      55% { stroke-dashoffset: 0; }
      100% { stroke-dashoffset: 0; }
    }
    @keyframes kf-check-tick {
      0% { stroke-dashoffset: 1; }
      45% { stroke-dashoffset: 1; }
      85% { stroke-dashoffset: 0; }
      100% { stroke-dashoffset: 0; }
    }
  </style>
  <circle cx="12" cy="12" r="9" pathLength="1" stroke-dasharray="1" class="p-ring" />
  <path d="M7.8 12.4 L10.7 15.3 L16.4 9.2" pathLength="1" stroke-dasharray="1" class="p-tick" />
</svg>

SVGは画像でありながらHTMLに似た構造を持つため、<style>タグを内側に置けます。ここに@keyframesを書いておけば、外から何も読み込ませずに動きが完結します。CSSアニメーションの書き方そのものは通常のWebページと同じで、基礎から確認したい場合はCSSアニメーション徹底解説が参考になります。

線が描かれて見える仕掛け

チェックマークが手書きのように描かれる動きは、線を消したり足したりしているわけではありません。破線の間隔を利用して、線を隠した状態から徐々に見せているだけです。仕掛けは3つの属性の組み合わせにあります。

あとはstroke-dashoffsetを1から0へ動かせば、線が伸びていくように見えます。円のリングを0〜55%で描き、チェックの線を45〜85%で描く——というように区間をずらして重ねているのが、先ほどのコードの2つの@keyframesです。この手法をゼロから自分で書く方法はSVGストロークアニメーションの作り方で解説しています。

画像として読み込まれたSVGの制限

ここは「動く仕組み」の裏返しとして知っておく価値があります。MDNの解説によると、img要素やbackground-imageから読み込まれたSVGには、セキュリティ上の制限としてJavaScriptが無効になり、外部のリソース（画像やスタイルシート）を読み込むことができません（出典: MDN Web Docs「画像としての SVG」）。

つまり、外部CSSに書いたスタイルはSVGの中身には届きません。ページ側のCSSで色を変えようとしても効かないのはこのためで、色を変えたいときはツールで色を指定して書き出し直すか、ダウンロードしたファイルのstrokeとcolorを直接書き換えます。この制限は画像として読み込んだときだけのもので、SVGのコードをHTMLに直接書き込んだ場合には当てはまりません。

サイトへの貼り方

ダウンロードしたファイルをサーバーに置いたら、あとは普通の画像と同じ扱いです。追加のライブラリも初期化のコードも必要ありません。

img要素で貼る

<img src="/assets/check-animated.svg" alt="" width="48" height="48">

widthとheightは必ず書いてください。指定がないと読み込み中に高さが確定せず、あとから画像が入った瞬間にまわりのテキストが押し下げられます。書き出しサイズと表示サイズは別物なので、256pxで書き出したファイルを48pxで表示しても問題ありません。SVGは拡大縮小しても劣化しないためです。

CSSの背景として貼る

.notice::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("/assets/bell-animated.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

擬似要素の背景に置く方法は、見出しやリストのマーカーとして使いたいときに向いています。この場合もアニメーションはそのまま動きます。

altの書き方

アイコンのaltは、そのアイコンが情報を持っているかどうかで決めます。判断に迷ったら、アイコンを消してみて意味が通じるかを考えてください。

• 隣にテキストがある装飾（「送信しました」の横のチェック）→ alt="" で空にする
• アイコン単体で意味を伝える（テキストのないボタン）→ 「送信」のように動作を書く
• 見た目の説明（「青いチェックマーク」）は書かない。読み上げの邪魔になる

WordPressで使うときの注意

WordPressは、標準の状態ではSVGファイルをメディアライブラリにアップロードできません。「このファイルタイプはセキュリティ上の理由から許可されていません」と表示されて弾かれます。バグではなく仕様です。

理由は、SVGが画像ではなくXMLのテキストファイルだからです。中にscriptタグやイベント属性を書き込めてしまうため、投稿権限を持つ全員がSVGを自由にアップロードできる状態は、そのまま任意のスクリプトを設置できる状態になりかねません。WordPressが既定で許可していないのは、この危険を避けるためです。

使いたい場合の選択肢は次の3つです。

注意したいのは、アップロードを許可するだけでは対策になっていないことです。許可を出すなら、危険な記述を取り除く仕組みと、誰にアップロードを許すかの線引きをセットで考える必要があります。共有ホスティングで複数人が投稿するサイトなら、無理にSVGを解禁せずPNGで済ませる判断も十分に現実的です。

プラグインで許可する手順、コードで許可する書き方、そして「追加したのにアップロードできない」ときにコアの中で何が起きているのかは、WordPressでSVGをアップロードする方法で詳しく解説しています。

なお、テーマの機能を自分で足していく進め方に慣れていない場合は、WordPressカスタマイズ入門｜functions.php便利コード集で全体像を掴んでおくと判断しやすくなります。

動かしすぎないための設計

動くアイコンは、置いた数だけ効果が上がるものではありません。むしろ1画面に1つだけ動かすほうが、その1つに視線が集まります。そして、動きの扱いにはアクセシビリティ上の基準もあります。

5秒を超えて動き続けるものには停止手段が要る

WCAG 2.2の達成基準2.2.2「一時停止、停止、非表示」（レベルA）は、動きのある情報が「自動的に開始し」「5秒よりも長く継続し」「その他のコンテンツと並行して提示される」場合に、利用者が一時停止・停止・非表示にできる手段を求めています（出典: ウェブアクセシビリティ基盤委員会 WCAG 2.2 日本語訳）。無限ループのアイコンを本文の横に置き続けるのは、この条件に当てはまり得ます。

だからこそ、このツールにはループ回数の設定があります。読み込み中の表示のように「動き続けること自体に意味がある」場面以外は、1回か3回で止めるのが安全な既定です。止まったあとは最後の状態で静止するので、チェックマークならチェックが付いた絵として残ります。

動きを減らしたい人への配慮を足す

OSの設定で「視差効果を減らす」を有効にしている利用者には、動き自体を止める配慮ができます。ダウンロードしたアニメSVGをテキストエディタで開き、<style>の中に次の3行を足すだけです。

@media (prefers-reduced-motion: reduce) {
  * { animation: none; }
}

アニメーションを外しても、線は描き終わった状態で表示されます。下地の破線指定が線の全長ぶんの長さになっているため、動かさなければ最初から全体が見えているからです。つまり動きが消えるだけで、アイコンの絵は欠けません。無限ループで使いたいアイコンには、この指定を足しておくと安心です。

こんな場面で使える

• フォーム送信後の「送信しました」に、チェックが描かれるアイコンを1回だけ添える
• 料金表の「対応」欄を、静止SVGのチェックで揃える（表の中では動かさない）
• 読み込み中の表示に、回り続けるリングを無限ループで置く
• 404ページや準備中ページの寂しさを、揺れるアイコン1つで埋める
• スライド資料やバナーに、透過PNGとして貼り込む
• サービス紹介セクションの見出し横に、静止SVGを並べて統一感を出す

並べてみると分かるとおり、動かす場面より動かさない場面のほうが多いのが実情です。同じ絵柄で静止版も手に入るのは、この使い分けのためです。ページ全体の装飾をまとめて作りたい場合は、CSSの装飾・アニメーションを作る無料ジェネレーターまとめから他のツールも合わせて選べます。

つまずきやすいポイント

貼ったのに動かない

まず、ダウンロードしたファイル名を確認してください。動くのは「アニメSVG」ボタンで書き出したファイルだけで、静止SVGとPNGは最初から動かない仕様です。ファイル名の末尾が-animated.svgになっているかが目印になります。ループ回数を1回にしている場合は、ページを開いた直後に一度だけ再生されて止まっているだけ、ということもあります。

CSSで色を変えたのに反映されない

先ほどの制限のとおり、画像として読み込んだSVGにページ側のCSSは届きません。色を変えるにはツール側で指定して書き出し直すか、ファイルを開いてstrokeとcolorの値を書き換えます。同じ色違いを複数使いたいときは、色ごとにファイルを分けるのが素直な進め方です。

一覧のアイコンが3回で止まる

これはツール側の仕様です。一覧のカードは設定に関係なく3回で停止します。設定したループ回数を確かめたいときは、選択後に設定パネル側のプレビューを見てください。書き出したファイルには設定した回数が反映されます。

線を細くしたい・太くしたい

線の太さはツール上では変更できませんが、ダウンロードしたSVGのstroke-width="2"を書き換えれば調整できます。小さく表示するアイコンは線を少し太めにすると視認性が上がり、大きく見せるアイコンは細めのほうが上品にまとまります。

よくある質問

Q. 商用利用できますか。クレジット表記は必要ですか？

個人・商用を問わず無料で利用でき、クレジット表記も不要です。色やサイズ、形状の改変も自由で、制作物に組み込んでクライアントへ納品することもできます。禁止しているのは、アイコンそのものを素材集としてまとめて再配布・販売する行為だけです。

Q. アニメSVGはどの環境で動きますか？

動きの仕組みはSVGに埋め込んだCSSアニメーションで、Chrome・Safari・Firefox・Edgeなど現行のブラウザで動作します。一方、メールソフトや資料作成ソフトのようにSVG自体を表示できないアプリでは、そもそもファイルが開けません。そうした配布先にはPNGを使ってください。

Q. GIFやアニメーションPNGで書き出せますか？

現在の書き出し形式はアニメSVG・静止SVG・PNGの3つで、GIFには対応していません。動きが必要ならアニメSVG、動きが不要ならPNGという選び分けになります。SVGを扱えない場所で動きを見せたい場合は、画面収録した動画を使うほうが確実です。

Q. ダウンロードしたファイルは重くありませんか？

アニメSVGは平均でおよそ1KB、静止SVGは0.4KB前後です。図形の座標と動きの指示だけを持つテキストファイルなので、写真やGIFとは桁が違います。ページ内に数個置いても表示速度への影響は実質的にありません。

Q. アイコンの形を自分で変えてもいいですか？

問題ありません。SVGはテキストファイルなので、エディタで開いて座標や線の太さを書き換えられます。IllustratorやFigmaに読み込んで編集することもできます。編集するなら、動きの指示が入っていない静止SVGのほうが扱いやすいです。

Q. 画像はサーバーに送信されますか？

送信されません。SVGの組み立てもPNGへの変換もブラウザの中だけで完結しており、生成したファイルが外部へ渡ることはありません。会員登録も不要で、書き出せる回数にも制限はありません。

Q. コードのほうが欲しいのですが？

このツールはファイルのダウンロードに特化しています。HTMLとCSSをコピーして自分のページに組み込みたい場合は、CSSアニメーションをコピペで使える無料ツールのほうが目的に合います。スクロールに連動させるなど込み入った制御が必要なら、GSAPアニメーションをコピペで使える無料ツールが向いています。

まとめ

動くアイコン ジェネレーターは、12カテゴリ300種のアイコンを、色・サイズ・速さ・ループ回数を決めてアニメSVG・静止SVG・PNGで書き出せる無料ツールです。書き出したアニメSVGは動きの指示をファイル内に持っているため、画像として貼るだけで動きます。外部ライブラリも初期化のコードも要りません。

使いこなす鍵は、動かす場所を絞ることです。本当に注目させたい1か所だけを動かし、残りは静止版で揃える。無限ループは読み込み表示のように動き続けることに意味がある場面へ限る。この2つを守るだけで、装飾ではなく機能として働くアイコンになります。まずは自分のサイトの「送信完了」か「読み込み中」に1つ置いてみるところから試してみてください。

操作の詳細やライセンスの条件は、ツールの使い方・FAQページにもまとめてあります。

関連記事

• CSSアニメーションをコピペで使える無料ツール｜3D含む100種をプレビューしてコード取得
• SVGストロークアニメーションの作り方｜線画演出をCSSとJavaScriptで実装
• CSSアニメーション徹底解説｜@keyframes の基本から応用まで
• GSAPアニメーションをコピペで使える無料ツール｜ScrollTrigger対応100種
• SVGロゴが描かれるローディングアニメーション｜実装ガイド
• CSSの装飾・アニメーションを作る無料ジェネレーターまとめ｜ボタン・ガラス・3Dカルーセル