Animated Icon Generator

Animated Icon Generator 是一款免费浏览器工具，可自定义图标并下载为动画 SVG、静态 SVG 或 PNG，适用于网页、设计和 WordPress 工作流，导出清晰、轻量的图标资源。

概述

Animated Icon Generator 是一款免费浏览器工具，可选择动画图标并下载为动画 SVG、静态 SVG 或 PNG。来源资料介绍了 300 个图标，按状态、操作、导航、媒体、文件和数据、通信、UI 和装饰、天气、商务、开发、设备，以及人物和健康等类别进行组织。

该工具面向简单的导出流程：先从列表中选择图标，再调整颜色、导出尺寸、速度和循环次数，然后下载适合目标环境的格式。动画 SVG 适用于可以放置自有文件的网站，静态 SVG 和 PNG 则适合设计工具、印刷以及不支持 SVG 动画的环境。

文档页面还提供了在 HTML 和 WordPress 中嵌入动画 SVG 的实用指导，以及许可说明。图标可用于商业用途且无需署名，但图标文件本身不能作为独立素材包重新分发或出售。

主要功能

图标选择与设置调整

从列表中点击并选择图标，然后在左侧设置面板中调整外观和动画条件。

颜色和动作的细致调整

可以指定颜色、导出尺寸、播放速度和循环次数，并将这些条件反映到输出文件中。

3 种输出格式

支持以动画 SVG、静态 SVG 和 PNG 三种格式导出，可按用途选择文件。

易于实现的动画 SVG

动画 SVG 即使通过 img 元素或 CSS 的 background-image 加载也能正常工作，无需额外添加外部 CSS 或 JavaScript。

列表中的预览播放

列表中的卡片进入屏幕时只播放 3 次后停止，再次查看时可通过悬停或“全部播放”重新播放。

典型用例

网站和应用 UI 动效
构建界面状态、加载指示器、提示和其他适合动效的 UI 元素，然后导出可直接放入网站或应用中的动画 SVG。
设计与印刷工作流
通过导出静态 SVG，为设计文件或印刷版式准备素材，既保留矢量质量，也可在设计工具中编辑。
不支持环境的备用素材
当目标环境不支持 SVG 上传或动画 SVG 时，导出 PNG 作为备用素材，包括文件处理受限的 WordPress 设置。
轻量级网页嵌入
将导出的 SVG 放入 img 元素中，或用作 CSS 背景图像，即可在网页中嵌入动画图标，而无需额外脚本。
一致交付定制素材
在导出前调整同一源图标的颜色、尺寸、速度和循环设置，以便为团队或客户交付时标准化图标输出。

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 个图标