Animated Icon Generator

Animated Icon Generator は、アイコンをカスタマイズしてアニメーションSVG、静的SVG、PNGでダウンロードできる無料のブラウザツールです。Web、デザイン、WordPressの制作に最適です。

概要

Animated Icon Generator は、アニメーションアイコンを選択し、アニメーションSVG、静的SVG、PNGでダウンロードできる無料のブラウザツールです。ソース資料では、ステータス、アクション、ナビゲーション、メディア、ファイルとデータ、コミュニケーション、UIと装飾、天気、コマース、開発、デバイス、人と健康などのカテゴリに整理された300個のアイコンが紹介されています。

このツールはシンプルな書き出し作業向けに設計されています。リストからアイコンを選び、色、出力サイズ、速度、ループ回数を調整してから、対象環境に合った形式でファイルをダウンロードします。アニメーションSVGは自分のファイルを配置できるサイト向けで、静的SVGとPNGはデザインツール、印刷、SVGアニメーションに対応していない環境をカバーします。

ドキュメントページには、HTML と WordPress にアニメーションSVGを埋め込むための実用的なガイダンスと、ライセンスに関する注意事項も記載されています。アイコンはクレジット表記なしで商用利用できますが、アイコンファイル自体を単体のアセットパックとして再配布したり販売したりすることはできません。

主な機能

アイコンの選択と設定調整

一覧からアイコンを選び、左側のパネルで見た目やアニメーション設定を調整できます。

色と動きの詳細な制御

色、出力サイズ、再生速度、ループ回数を設定し、それらの設定を出力ファイルに反映できます。

3種類の出力形式

アニメーションSVG、静的SVG、PNGでエクスポートできるため、用途に合ったファイル形式を選べます。

実装しやすいアニメーションSVG

アニメーションSVGは、外部CSSやJavaScriptを追加しなくても、img要素やCSSの background-image から読み込めます。

一覧内でのプレビュー再生

一覧のカードは画面に入ると3回だけ再生され、その後停止します。ホバーまたは「すべて再生」で再生し直せます。

代表的な用途

WebサイトやアプリのUIモーション
インターフェースの状態、読み込み中表示、アラートなどの動きに適したUI要素を作成し、サイトやアプリに直接配置できるアニメーションSVGとして書き出します。
デザインと印刷のワークフロー
静的SVGとして書き出すことで、ベクター品質を保ちながらデザインファイルや印刷レイアウト向けのアセットを準備できます。
非対応環境向けのフォールバックアセット
出力先がSVGアップロードやアニメーションSVGに対応していない場合、フォールバック用のPNGを作成します。ファイルの取り扱いに制限のあるWordPress環境も含まれます。
軽量なWeb埋め込み
書き出したSVGをimg要素に配置するか、CSSの背景画像として使用することで、追加のスクリプトなしでWebページにアニメーションアイコンを埋め込めます。
調整済みアセットの一貫した配布
同じ元アイコンの色、サイズ、速度、ループ設定を調整してから書き出すことで、チームやクライアントへの受け渡し用にアイコン出力を標準化できます。

Pros and Cons

Pros

個人プロジェクトでも商用プロジェクトでも無料で利用できます。
明記されたライセンスのもとではクレジット表記は不要です。
アニメーションSVG、静的SVG、PNGの出力に対応しています。
色、サイズ、速度、ループ回数などの書き出し設定がダウンロードしたファイルに反映されます。
アニメーションSVGは外部CSSやJavaScriptを追加せずに使用できます。

Cons

PNG出力ではアニメーションが保持されません。
WordPress では、SVGファイルを使用するためにプラグインやサーバー側のアップロード設定変更が必要になる場合があります。

FAQ

使い方を教えてください。

リストからアイコンを選び、左側の設定パネルで色、出力サイズ、速度、ループ回数を調整してから、アニメーションSVG、静的SVG、PNGのいずれかでダウンロードします。

3つの出力形式はどう使い分ければよいですか？

アニメーションを維持しながらファイルを配置できるサイトではアニメーションSVGを使用します。静的SVGはデザインツールや印刷向け、PNGはSVGを使用できない環境向けです。

WordPressで使うにはどうすればよいですか？

WordPress ではデフォルトでSVGのアップロードが許可されていません。Safe SVG などのプラグインを使うか、functions.php の upload_mimes を調整してください。設定を変更できない場合はPNGを使用してください。

商用利用はできますか？また、クレジット表記は必要ですか？

はい。ライセンス上、個人利用・商用利用のどちらも無料で、クレジット表記は不要です。ただし、アイコン自体をまとめたアセットパックとして再配布または販売することは禁止されています。

ダウンロード後にファイルを細かく調整できますか？

書き出したSVGをテキストエディタで開けば、stroke、color、@keyframes の設定を確認・調整できます。stroke-width を編集して線の太さを変更することもできます。

Quick Facts

カテゴリ: 開発者向けツール
ソースドメイン: codequest.work
製品タイプ: アニメーションアイコンジェネレーター
出力形式: アニメーションSVG、静的SVG、PNG
ライセンス: 個人利用・商用利用ともに無料。クレジット表記不要
表示アイコン数: 300個のアイコン