abstract-014 SVG 图标
game-iconsabstract-014
来自 Game Icons 开源图标集,矢量 SVG 可无损缩放到任意尺寸,支持在线改色、复制 React/Vue/HTML 代码。
- 图标 ID
- game-icons:abstract-014
- 中文名
- —
- 所属集合
- Game Icons
- 集合规模
- 4,133 枚
- 基础网格
- —
- 色彩
- 单色(可改色)
- 开源协议
- CC-BY-3.0
- 作者
- GameIcons
game-iconsabstract-014
来自 Game Icons 开源图标集,矢量 SVG 可无损缩放到任意尺寸,支持在线改色、复制 React/Vue/HTML 代码。
SVG 矢量源文件,或 PNG 按 16~512 预设与 16~1024 自定义尺寸导出,任意尺寸边缘锐利。
PNG 由矢量源实时渲染,任意尺寸边缘锐利无锯齿;下载与预览均免费,无需注册。
切换预览颜色后,下方三底色、真实界面场景与各尺寸渲染会实时跟随。
内联 SVG、React、Vue 与 CSS mask 四种主流引用方式,代码基于当前源文件生成,复制即用。
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M195.775 21.06c-5.99.153-11.996.566-18.067 1.321C79.496 34.604 9.985 122.564 22.445 218.901c1.709 13.214 3.566 26.02 6.61 38.187c-.022.885-.147 1.752-.147 2.643c0 32.273 16.756 60.593 42.01 76.963L49.62 442.15c-4.077 20.24 16.69 38.23 37.31 37.16l143.512-7.491c30.95 15.48 66.803 22.382 103.851 17.772c98.212-12.222 167.723-100.182 155.263-196.519c-1.007-7.786-2.075-15.468-3.378-22.912c.387-3.422.734-6.904.734-10.429c0-34.229-18.863-64.117-46.711-79.9l22.18-110.009c4.078-20.24-16.688-38.23-37.31-37.16L281.56 40.154a181.5 181.5 0 0 0-85.784-19.093zm120.597 41.859h81.67c14.44 0 26 11.56 26 25.997v83.718c-9.148-3.052-18.923-4.7-29.084-4.7c-6.077 0-11.882.634-17.627 1.763c-6.84-43.182-29.306-80.382-60.96-106.778M153.324 70.85c58.879-1.626 128.304 46.313 174.505 123.669c-18.23 17.477-28.28 42.905-24.824 69.619c.218 1.69.563 3.34.881 4.993c.007.044-.007.1 0 .147c4.756 46.198 43.616 82.25 91.072 82.25c23.527 0 45-8.928 61.253-23.5c-3.775 47.965-23.64 86.444-58.756 103.694c-63.04 30.965-152.808-17.388-209.906-109.129c15.436-16.435 24.972-38.533 24.972-62.862c0-50.668-40.987-91.797-91.66-91.797c-25.708 0-48.986 10.563-65.66 27.613c1.299-53.318 21.44-96.68 59.344-115.297c8.592-4.22 17.739-7.002 27.175-8.372c3.822-.555 7.679-.92 11.604-1.028m-47.886 124.844c21.64 0 39.22 17.577 39.22 39.216s-17.58 39.215-39.22 39.215s-39.22-17.577-39.22-39.215s17.579-39.216 39.22-39.216m268.515 0c21.64 0 39.22 17.577 39.22 39.216s-17.58 39.215-39.22 39.215s-39.073-17.577-39.073-39.215s17.432-39.216 39.073-39.216M87.958 345.36c10.242 3.94 21.29 6.168 32.903 6.168c5.215 0 10.154-.632 15.13-1.468c8.2 39.866 29.87 74.183 59.637 98.993h-81.67c-14.44 0-26-11.56-26-25.997z"/></svg>export function Abstract014Icon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 512 512"
fill="currentColor"
{...props}
dangerouslySetInnerHTML={{ __html: `<path fill="currentColor" d="M195.775 21.06c-5.99.153-11.996.566-18.067 1.321C79.496 34.604 9.985 122.564 22.445 218.901c1.709 13.214 3.566 26.02 6.61 38.187c-.022.885-.147 1.752-.147 2.643c0 32.273 16.756 60.593 42.01 76.963L49.62 442.15c-4.077 20.24 16.69 38.23 37.31 37.16l143.512-7.491c30.95 15.48 66.803 22.382 103.851 17.772c98.212-12.222 167.723-100.182 155.263-196.519c-1.007-7.786-2.075-15.468-3.378-22.912c.387-3.422.734-6.904.734-10.429c0-34.229-18.863-64.117-46.711-79.9l22.18-110.009c4.078-20.24-16.688-38.23-37.31-37.16L281.56 40.154a181.5 181.5 0 0 0-85.784-19.093zm120.597 41.859h81.67c14.44 0 26 11.56 26 25.997v83.718c-9.148-3.052-18.923-4.7-29.084-4.7c-6.077 0-11.882.634-17.627 1.763c-6.84-43.182-29.306-80.382-60.96-106.778M153.324 70.85c58.879-1.626 128.304 46.313 174.505 123.669c-18.23 17.477-28.28 42.905-24.824 69.619c.218 1.69.563 3.34.881 4.993c.007.044-.007.1 0 .147c4.756 46.198 43.616 82.25 91.072 82.25c23.527 0 45-8.928 61.253-23.5c-3.775 47.965-23.64 86.444-58.756 103.694c-63.04 30.965-152.808-17.388-209.906-109.129c15.436-16.435 24.972-38.533 24.972-62.862c0-50.668-40.987-91.797-91.66-91.797c-25.708 0-48.986 10.563-65.66 27.613c1.299-53.318 21.44-96.68 59.344-115.297c8.592-4.22 17.739-7.002 27.175-8.372c3.822-.555 7.679-.92 11.604-1.028m-47.886 124.844c21.64 0 39.22 17.577 39.22 39.216s-17.58 39.215-39.22 39.215s-39.22-17.577-39.22-39.215s17.579-39.216 39.22-39.216m268.515 0c21.64 0 39.22 17.577 39.22 39.216s-17.58 39.215-39.22 39.215s-39.073-17.577-39.073-39.215s17.432-39.216 39.073-39.216M87.958 345.36c10.242 3.94 21.29 6.168 32.903 6.168c5.215 0 10.154-.632 15.13-1.468c8.2 39.866 29.87 74.183 59.637 98.993h-81.67c-14.44 0-26-11.56-26-25.997z"/>` }}
/>
);
}<template>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512" fill="currentColor" v-html="body"></svg>
</template>
<script setup>
const body = `<path fill="currentColor" d="M195.775 21.06c-5.99.153-11.996.566-18.067 1.321C79.496 34.604 9.985 122.564 22.445 218.901c1.709 13.214 3.566 26.02 6.61 38.187c-.022.885-.147 1.752-.147 2.643c0 32.273 16.756 60.593 42.01 76.963L49.62 442.15c-4.077 20.24 16.69 38.23 37.31 37.16l143.512-7.491c30.95 15.48 66.803 22.382 103.851 17.772c98.212-12.222 167.723-100.182 155.263-196.519c-1.007-7.786-2.075-15.468-3.378-22.912c.387-3.422.734-6.904.734-10.429c0-34.229-18.863-64.117-46.711-79.9l22.18-110.009c4.078-20.24-16.688-38.23-37.31-37.16L281.56 40.154a181.5 181.5 0 0 0-85.784-19.093zm120.597 41.859h81.67c14.44 0 26 11.56 26 25.997v83.718c-9.148-3.052-18.923-4.7-29.084-4.7c-6.077 0-11.882.634-17.627 1.763c-6.84-43.182-29.306-80.382-60.96-106.778M153.324 70.85c58.879-1.626 128.304 46.313 174.505 123.669c-18.23 17.477-28.28 42.905-24.824 69.619c.218 1.69.563 3.34.881 4.993c.007.044-.007.1 0 .147c4.756 46.198 43.616 82.25 91.072 82.25c23.527 0 45-8.928 61.253-23.5c-3.775 47.965-23.64 86.444-58.756 103.694c-63.04 30.965-152.808-17.388-209.906-109.129c15.436-16.435 24.972-38.533 24.972-62.862c0-50.668-40.987-91.797-91.66-91.797c-25.708 0-48.986 10.563-65.66 27.613c1.299-53.318 21.44-96.68 59.344-115.297c8.592-4.22 17.739-7.002 27.175-8.372c3.822-.555 7.679-.92 11.604-1.028m-47.886 124.844c21.64 0 39.22 17.577 39.22 39.216s-17.58 39.215-39.22 39.215s-39.22-17.577-39.22-39.215s17.579-39.216 39.22-39.216m268.515 0c21.64 0 39.22 17.577 39.22 39.216s-17.58 39.215-39.22 39.215s-39.073-17.577-39.073-39.215s17.432-39.216 39.073-39.216M87.958 345.36c10.242 3.94 21.29 6.168 32.903 6.168c5.215 0 10.154-.632 15.13-1.468c8.2 39.866 29.87 74.183 59.637 98.993h-81.67c-14.44 0-26-11.56-26-25.997z"/>`;
</script>.abstract-014 {
width: 1em;
height: 1em;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M195.775%2021.06c-5.99.153-11.996.566-18.067%201.321C79.496%2034.604%209.985%20122.564%2022.445%20218.901c1.709%2013.214%203.566%2026.02%206.61%2038.187c-.022.885-.147%201.752-.147%202.643c0%2032.273%2016.756%2060.593%2042.01%2076.963L49.62%20442.15c-4.077%2020.24%2016.69%2038.23%2037.31%2037.16l143.512-7.491c30.95%2015.48%2066.803%2022.382%20103.851%2017.772c98.212-12.222%20167.723-100.182%20155.263-196.519c-1.007-7.786-2.075-15.468-3.378-22.912c.387-3.422.734-6.904.734-10.429c0-34.229-18.863-64.117-46.711-79.9l22.18-110.009c4.078-20.24-16.688-38.23-37.31-37.16L281.56%2040.154a181.5%20181.5%200%200%200-85.784-19.093zm120.597%2041.859h81.67c14.44%200%2026%2011.56%2026%2025.997v83.718c-9.148-3.052-18.923-4.7-29.084-4.7c-6.077%200-11.882.634-17.627%201.763c-6.84-43.182-29.306-80.382-60.96-106.778M153.324%2070.85c58.879-1.626%20128.304%2046.313%20174.505%20123.669c-18.23%2017.477-28.28%2042.905-24.824%2069.619c.218%201.69.563%203.34.881%204.993c.007.044-.007.1%200%20.147c4.756%2046.198%2043.616%2082.25%2091.072%2082.25c23.527%200%2045-8.928%2061.253-23.5c-3.775%2047.965-23.64%2086.444-58.756%20103.694c-63.04%2030.965-152.808-17.388-209.906-109.129c15.436-16.435%2024.972-38.533%2024.972-62.862c0-50.668-40.987-91.797-91.66-91.797c-25.708%200-48.986%2010.563-65.66%2027.613c1.299-53.318%2021.44-96.68%2059.344-115.297c8.592-4.22%2017.739-7.002%2027.175-8.372c3.822-.555%207.679-.92%2011.604-1.028m-47.886%20124.844c21.64%200%2039.22%2017.577%2039.22%2039.216s-17.58%2039.215-39.22%2039.215s-39.22-17.577-39.22-39.215s17.579-39.216%2039.22-39.216m268.515%200c21.64%200%2039.22%2017.577%2039.22%2039.216s-17.58%2039.215-39.22%2039.215s-39.073-17.577-39.073-39.215s17.432-39.216%2039.073-39.216M87.958%20345.36c10.242%203.94%2021.29%206.168%2032.903%206.168c5.215%200%2010.154-.632%2015.13-1.468c8.2%2039.866%2029.87%2074.183%2059.637%2098.993h-81.67c-14.44%200-26-11.56-26-25.997z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M195.775%2021.06c-5.99.153-11.996.566-18.067%201.321C79.496%2034.604%209.985%20122.564%2022.445%20218.901c1.709%2013.214%203.566%2026.02%206.61%2038.187c-.022.885-.147%201.752-.147%202.643c0%2032.273%2016.756%2060.593%2042.01%2076.963L49.62%20442.15c-4.077%2020.24%2016.69%2038.23%2037.31%2037.16l143.512-7.491c30.95%2015.48%2066.803%2022.382%20103.851%2017.772c98.212-12.222%20167.723-100.182%20155.263-196.519c-1.007-7.786-2.075-15.468-3.378-22.912c.387-3.422.734-6.904.734-10.429c0-34.229-18.863-64.117-46.711-79.9l22.18-110.009c4.078-20.24-16.688-38.23-37.31-37.16L281.56%2040.154a181.5%20181.5%200%200%200-85.784-19.093zm120.597%2041.859h81.67c14.44%200%2026%2011.56%2026%2025.997v83.718c-9.148-3.052-18.923-4.7-29.084-4.7c-6.077%200-11.882.634-17.627%201.763c-6.84-43.182-29.306-80.382-60.96-106.778M153.324%2070.85c58.879-1.626%20128.304%2046.313%20174.505%20123.669c-18.23%2017.477-28.28%2042.905-24.824%2069.619c.218%201.69.563%203.34.881%204.993c.007.044-.007.1%200%20.147c4.756%2046.198%2043.616%2082.25%2091.072%2082.25c23.527%200%2045-8.928%2061.253-23.5c-3.775%2047.965-23.64%2086.444-58.756%20103.694c-63.04%2030.965-152.808-17.388-209.906-109.129c15.436-16.435%2024.972-38.533%2024.972-62.862c0-50.668-40.987-91.797-91.66-91.797c-25.708%200-48.986%2010.563-65.66%2027.613c1.299-53.318%2021.44-96.68%2059.344-115.297c8.592-4.22%2017.739-7.002%2027.175-8.372c3.822-.555%207.679-.92%2011.604-1.028m-47.886%20124.844c21.64%200%2039.22%2017.577%2039.22%2039.216s-17.58%2039.215-39.22%2039.215s-39.22-17.577-39.22-39.215s17.579-39.216%2039.22-39.216m268.515%200c21.64%200%2039.22%2017.577%2039.22%2039.216s-17.58%2039.215-39.22%2039.215s-39.073-17.577-39.073-39.215s17.432-39.216%2039.073-39.216M87.958%20345.36c10.242%203.94%2021.29%206.168%2032.903%206.168c5.215%200%2010.154-.632%2015.13-1.468c8.2%2039.866%2029.87%2074.183%2059.637%2098.993h-81.67c-14.44%200-26-11.56-26-25.997z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}单文件 CSS 即可播放,无需任何依赖;描画动效仅对描边类图标生效。
透明度往复渐变,适合状态提示与在线指示。
.icon-abstract-014 {
animation: icon-breathe 1.8s ease-in-out infinite;
}
@keyframes icon-breathe {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}匀速循环旋转,适合加载中场景。
.icon-abstract-014 {
animation: icon-spin 1.6s linear infinite;
}
@keyframes icon-spin {
to { transform: rotate(360deg); }
}对源文件的客观技术指标,供工程侧评估引用方式。
文件体积
1.75 KB
1,789 字节
viewBox
0 0 512 512
矢量坐标系
图元总数
1
<path> ×1
风格
单色(跟随 currentColor)
填充跟随容器颜色
同时含 width/height 与 viewBox:可以只保留 viewBox,让图标跟随容器自适应缩放。 文件体积 1.75 KB(1,789 字节),图元 1 个,风格为单色(跟随 currentColor)。
关于 abstract-014 图标的下载、商用与改色。
它是 Game Icons(game-icons)开源图标集中的 abstract-014 图标,单色(跟随 currentColor),viewBox 为 0 0 512 512,文件仅 1.75 KB,矢量格式可无损缩放到任意尺寸。
点击「下载与导出」中的 SVG 源文件按钮保存矢量文件;也可以按 512 / 256 / 128 / 64 / 32 / 16px 预设导出 PNG,或在输入框填 16~1024 之间的任意尺寸。需要 iOS、Android 全套尺寸时,用素材包生成器一键打包。
该图标采用 CC BY 3.0(CC-BY-3.0) 开源协议,通常允许在遵守协议的前提下免费使用,常见要求是保留作者版权声明。商用前建议阅读协议原文确认。
在「预览与场景」的色板中切换颜色,三底色与全部场景会实时跟随;点击任一相近图标可打开预览弹层,复制对应颜色的 SVG 源码或 PNG。也可以复制 SVG 源码后自行修改 fill 值。