找找图标

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

下载 abstract-014 图标

SVG 矢量源文件,或 PNG 按 16~512 预设与 16~1024 自定义尺寸导出,任意尺寸边缘锐利。

px

PNG 由矢量源实时渲染,任意尺寸边缘锐利无锯齿;下载与预览均免费,无需注册。

abstract-014 的预览与使用场景

切换预览颜色后,下方三底色、真实界面场景与各尺寸渲染会实时跟随。

预览颜色
abstract-014 图标 浅色背景预览浅色背景
abstract-014 图标 深色背景预览深色背景
abstract-014 图标 灰底融入预览灰底融入

在真实界面里长这样

继续按钮内 · 主操作
搜索abstract-014…输入框 · 前缀图标
abstract-014导航菜单 · 选中态
暂无内容空状态 · 引导提示
9:41abstract-014 App 图标abstract-014abstract-001abstract-002abstract-003abstract-004abstract-005abstract-006abstract-007abstract-008abstract-009abstract-010abstract-011手机桌面 · App 图标
abstract-014game-icons.design/icons/abstract-014浏览器 · 标签页与站点图标

各尺寸下的可读性

abstract-014 图标 24px 渲染24pxabstract-014 图标 32px 渲染32pxabstract-014 图标 48px 渲染48pxabstract-014 图标 64px 渲染64pxabstract-014 图标 96px 渲染96pxabstract-014 图标 128px 渲染128px

复制 abstract-014 图标代码

内联 SVG、React、Vue 与 CSS mask 四种主流引用方式,代码基于当前源文件生成,复制即用。

svgSVG 源码(内联 HTML)
<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>
reactReact 组件(TSX)
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"/>` }}
    />
  );
}
vueVue 3 组件
<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>
cssCSS mask(随 currentColor 改色)
.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;
}

给 abstract-014 加一点动效

单文件 CSS 即可播放,无需任何依赖;描画动效仅对描边类图标生效。

abstract-014 呼吸动效演示

呼吸

透明度往复渐变,适合状态提示与在线指示。

css呼吸动效样式
.icon-abstract-014 {
  animation: icon-breathe 1.8s ease-in-out infinite;
}

@keyframes icon-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
abstract-014 旋转动效演示

旋转

匀速循环旋转,适合加载中场景。

css旋转动效样式
.icon-abstract-014 {
  animation: icon-spin 1.6s linear infinite;
}

@keyframes icon-spin {
  to { transform: rotate(360deg); }
}

SVG 健康报告

对源文件的客观技术指标,供工程侧评估引用方式。

文件体积

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 图标的下载、商用与改色。

abstract-014 图标是什么?▾

它是 Game Icons(game-icons)开源图标集中的 abstract-014 图标,单色(跟随 currentColor),viewBox 为 0 0 512 512,文件仅 1.75 KB,矢量格式可无损缩放到任意尺寸。

如何下载 abstract-014 图标?▾

点击「下载与导出」中的 SVG 源文件按钮保存矢量文件;也可以按 512 / 256 / 128 / 64 / 32 / 16px 预设导出 PNG,或在输入框填 16~1024 之间的任意尺寸。需要 iOS、Android 全套尺寸时,用素材包生成器一键打包。

abstract-014 图标可以商用吗?▾

该图标采用 CC BY 3.0(CC-BY-3.0) 开源协议,通常允许在遵守协议的前提下免费使用,常见要求是保留作者版权声明。商用前建议阅读协议原文确认。

如何修改 abstract-014 图标的颜色?▾

在「预览与场景」的色板中切换颜色,三底色与全部场景会实时跟随;点击任一相近图标可打开预览弹层,复制对应颜色的 SVG 源码或 PNG。也可以复制 SVG 源码后自行修改 fill 值。

Game Icons 中的相近图标

abstract-001
abstract-002
abstract-003
abstract-004
abstract-005
abstract-006
abstract-007
abstract-008
abstract-009
abstract-010
abstract-011
abstract-012
abstract-013
abstract-015
abstract-016
abstract-017
abstract-018
abstract-019
abstract-020
abstract-021
abstract-022
abstract-023
abstract-024
abstract-025