找找图标

settings-broken SVG 图标

solarsettings-broken

来自 Solar 开源图标集,矢量 SVG 可无损缩放到任意尺寸,支持在线改色、复制 React/Vue/HTML 代码。

图标 ID
solar:settings-broken
中文名
—
所属集合
Solar
集合规模
8,706 枚
基础网格
24px
色彩
单色(可改色)
开源协议
CC-BY-4.0
作者
480 Design

下载 settings-broken 图标

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

px

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

settings-broken 的预览与使用场景

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

预览颜色
settings-broken 图标 浅色背景预览浅色背景
settings-broken 图标 深色背景预览深色背景
settings-broken 图标 灰底融入预览灰底融入

在真实界面里长这样

继续按钮内 · 主操作
搜索settings-broken…输入框 · 前缀图标
settings-broken导航菜单 · 选中态
暂无内容空状态 · 引导提示
9:41settings-broken App 图标settings-brokensettings-boldsettings-bold-duotonesettings-line-duotonesettings-linearsettings-outlinesettings-minimalistic-boldsettings-minimalistic-bold-duotonesettings-minimalistic-brokensettings-minimalistic-line-duotonesettings-minimalistic-linearsettings-minimalistic-outline手机桌面 · App 图标
settings-brokensolar.design/icons/settings-broken浏览器 · 标签页与站点图标

各尺寸下的可读性

settings-broken 图标 24px 渲染24pxsettings-broken 图标 32px 渲染32pxsettings-broken 图标 48px 渲染48pxsettings-broken 图标 64px 渲染64pxsettings-broken 图标 96px 渲染96pxsettings-broken 图标 128px 渲染128px

复制 settings-broken 图标代码

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

svgSVG 源码(内联 HTML)
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><circle cx="12" cy="12" r="3"/><path d="M3.66122 10.6392C4.13377 10.9361 4.43782 11.4419 4.43782 11.9999C4.43781 12.558 4.13376 13.0638 3.66122 13.3607C3.33966 13.5627 3.13248 13.7242 2.98508 13.9163C2.66217 14.3372 2.51966 14.869 2.5889 15.3949C2.64082 15.7893 2.87379 16.1928 3.33973 16.9999C3.80568 17.8069 4.03865 18.2104 4.35426 18.4526C4.77508 18.7755 5.30694 18.918 5.83284 18.8488C6.07287 18.8172 6.31628 18.7185 6.65196 18.5411C7.14544 18.2803 7.73558 18.2699 8.21895 18.549C8.70227 18.8281 8.98827 19.3443 9.00912 19.902C9.02332 20.2815 9.05958 20.5417 9.15224 20.7654C9.35523 21.2554 9.74458 21.6448 10.2346 21.8478C10.6022 22 11.0681 22 12 22C12.9319 22 13.3978 22 13.7654 21.8478C14.2554 21.6448 14.6448 21.2554 14.8478 20.7654C14.9404 20.5417 14.9767 20.2815 14.9909 19.9021C15.0117 19.3443 15.2977 18.8281 15.7811 18.549C16.2644 18.27 16.8545 18.2804 17.3479 18.5412C17.6837 18.7186 17.9271 18.8173 18.1671 18.8489C18.693 18.9182 19.2249 18.7756 19.6457 18.4527C19.9613 18.2106 20.1943 17.807 20.6603 17C20.8677 16.6407 21.029 16.3614 21.1486 16.1272M20.3387 13.3608C19.8662 13.0639 19.5622 12.5581 19.5621 12.0001C19.5621 11.442 19.8662 10.9361 20.3387 10.6392C20.6603 10.4372 20.8674 10.2757 21.0148 10.0836C21.3377 9.66278 21.4802 9.13092 21.411 8.60502C21.3591 8.2106 21.1261 7.80708 20.6601 7.00005C20.1942 6.19301 19.9612 5.7895 19.6456 5.54732C19.2248 5.22441 18.6929 5.0819 18.167 5.15113C17.927 5.18274 17.6836 5.2814 17.3479 5.45883C16.8544 5.71964 16.2643 5.73004 15.781 5.45096C15.2977 5.1719 15.0117 4.6557 14.9909 4.09803C14.9767 3.71852 14.9404 3.45835 14.8478 3.23463C14.6448 2.74458 14.2554 2.35523 13.7654 2.15224C13.3978 2 12.9319 2 12 2C11.0681 2 10.6022 2 10.2346 2.15224C9.74458 2.35523 9.35523 2.74458 9.15224 3.23463C9.05958 3.45833 9.02332 3.71848 9.00912 4.09794C8.98826 4.65566 8.70225 5.17191 8.21891 5.45096C7.73557 5.73002 7.14548 5.71959 6.65205 5.4588C6.31633 5.28136 6.0729 5.18269 5.83285 5.15108C5.30695 5.08185 4.77509 5.22436 4.35427 5.54727C4.03866 5.78945 3.80569 6.19297 3.33974 7C3.13231 7.35929 2.97105 7.63859 2.85138 7.87273"/></g></svg>
reactReact 组件(TSX)
export function SettingsBrokenIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      viewBox="0 0 24 24"
      fill="currentColor"
      {...props}
      dangerouslySetInnerHTML={{ __html: `<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><circle cx="12" cy="12" r="3"/><path d="M3.66122 10.6392C4.13377 10.9361 4.43782 11.4419 4.43782 11.9999C4.43781 12.558 4.13376 13.0638 3.66122 13.3607C3.33966 13.5627 3.13248 13.7242 2.98508 13.9163C2.66217 14.3372 2.51966 14.869 2.5889 15.3949C2.64082 15.7893 2.87379 16.1928 3.33973 16.9999C3.80568 17.8069 4.03865 18.2104 4.35426 18.4526C4.77508 18.7755 5.30694 18.918 5.83284 18.8488C6.07287 18.8172 6.31628 18.7185 6.65196 18.5411C7.14544 18.2803 7.73558 18.2699 8.21895 18.549C8.70227 18.8281 8.98827 19.3443 9.00912 19.902C9.02332 20.2815 9.05958 20.5417 9.15224 20.7654C9.35523 21.2554 9.74458 21.6448 10.2346 21.8478C10.6022 22 11.0681 22 12 22C12.9319 22 13.3978 22 13.7654 21.8478C14.2554 21.6448 14.6448 21.2554 14.8478 20.7654C14.9404 20.5417 14.9767 20.2815 14.9909 19.9021C15.0117 19.3443 15.2977 18.8281 15.7811 18.549C16.2644 18.27 16.8545 18.2804 17.3479 18.5412C17.6837 18.7186 17.9271 18.8173 18.1671 18.8489C18.693 18.9182 19.2249 18.7756 19.6457 18.4527C19.9613 18.2106 20.1943 17.807 20.6603 17C20.8677 16.6407 21.029 16.3614 21.1486 16.1272M20.3387 13.3608C19.8662 13.0639 19.5622 12.5581 19.5621 12.0001C19.5621 11.442 19.8662 10.9361 20.3387 10.6392C20.6603 10.4372 20.8674 10.2757 21.0148 10.0836C21.3377 9.66278 21.4802 9.13092 21.411 8.60502C21.3591 8.2106 21.1261 7.80708 20.6601 7.00005C20.1942 6.19301 19.9612 5.7895 19.6456 5.54732C19.2248 5.22441 18.6929 5.0819 18.167 5.15113C17.927 5.18274 17.6836 5.2814 17.3479 5.45883C16.8544 5.71964 16.2643 5.73004 15.781 5.45096C15.2977 5.1719 15.0117 4.6557 14.9909 4.09803C14.9767 3.71852 14.9404 3.45835 14.8478 3.23463C14.6448 2.74458 14.2554 2.35523 13.7654 2.15224C13.3978 2 12.9319 2 12 2C11.0681 2 10.6022 2 10.2346 2.15224C9.74458 2.35523 9.35523 2.74458 9.15224 3.23463C9.05958 3.45833 9.02332 3.71848 9.00912 4.09794C8.98826 4.65566 8.70225 5.17191 8.21891 5.45096C7.73557 5.73002 7.14548 5.71959 6.65205 5.4588C6.31633 5.28136 6.0729 5.18269 5.83285 5.15108C5.30695 5.08185 4.77509 5.22436 4.35427 5.54727C4.03866 5.78945 3.80569 6.19297 3.33974 7C3.13231 7.35929 2.97105 7.63859 2.85138 7.87273"/></g>` }}
    />
  );
}
vueVue 3 组件
<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" v-html="body"></svg>
</template>

<script setup>
const body = `<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><circle cx="12" cy="12" r="3"/><path d="M3.66122 10.6392C4.13377 10.9361 4.43782 11.4419 4.43782 11.9999C4.43781 12.558 4.13376 13.0638 3.66122 13.3607C3.33966 13.5627 3.13248 13.7242 2.98508 13.9163C2.66217 14.3372 2.51966 14.869 2.5889 15.3949C2.64082 15.7893 2.87379 16.1928 3.33973 16.9999C3.80568 17.8069 4.03865 18.2104 4.35426 18.4526C4.77508 18.7755 5.30694 18.918 5.83284 18.8488C6.07287 18.8172 6.31628 18.7185 6.65196 18.5411C7.14544 18.2803 7.73558 18.2699 8.21895 18.549C8.70227 18.8281 8.98827 19.3443 9.00912 19.902C9.02332 20.2815 9.05958 20.5417 9.15224 20.7654C9.35523 21.2554 9.74458 21.6448 10.2346 21.8478C10.6022 22 11.0681 22 12 22C12.9319 22 13.3978 22 13.7654 21.8478C14.2554 21.6448 14.6448 21.2554 14.8478 20.7654C14.9404 20.5417 14.9767 20.2815 14.9909 19.9021C15.0117 19.3443 15.2977 18.8281 15.7811 18.549C16.2644 18.27 16.8545 18.2804 17.3479 18.5412C17.6837 18.7186 17.9271 18.8173 18.1671 18.8489C18.693 18.9182 19.2249 18.7756 19.6457 18.4527C19.9613 18.2106 20.1943 17.807 20.6603 17C20.8677 16.6407 21.029 16.3614 21.1486 16.1272M20.3387 13.3608C19.8662 13.0639 19.5622 12.5581 19.5621 12.0001C19.5621 11.442 19.8662 10.9361 20.3387 10.6392C20.6603 10.4372 20.8674 10.2757 21.0148 10.0836C21.3377 9.66278 21.4802 9.13092 21.411 8.60502C21.3591 8.2106 21.1261 7.80708 20.6601 7.00005C20.1942 6.19301 19.9612 5.7895 19.6456 5.54732C19.2248 5.22441 18.6929 5.0819 18.167 5.15113C17.927 5.18274 17.6836 5.2814 17.3479 5.45883C16.8544 5.71964 16.2643 5.73004 15.781 5.45096C15.2977 5.1719 15.0117 4.6557 14.9909 4.09803C14.9767 3.71852 14.9404 3.45835 14.8478 3.23463C14.6448 2.74458 14.2554 2.35523 13.7654 2.15224C13.3978 2 12.9319 2 12 2C11.0681 2 10.6022 2 10.2346 2.15224C9.74458 2.35523 9.35523 2.74458 9.15224 3.23463C9.05958 3.45833 9.02332 3.71848 9.00912 4.09794C8.98826 4.65566 8.70225 5.17191 8.21891 5.45096C7.73557 5.73002 7.14548 5.71959 6.65205 5.4588C6.31633 5.28136 6.0729 5.18269 5.83285 5.15108C5.30695 5.08185 4.77509 5.22436 4.35427 5.54727C4.03866 5.78945 3.80569 6.19297 3.33974 7C3.13231 7.35929 2.97105 7.63859 2.85138 7.87273"/></g>`;
</script>
cssCSS mask(随 currentColor 改色)
.settings-broken {
  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%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M3.66122%2010.6392C4.13377%2010.9361%204.43782%2011.4419%204.43782%2011.9999C4.43781%2012.558%204.13376%2013.0638%203.66122%2013.3607C3.33966%2013.5627%203.13248%2013.7242%202.98508%2013.9163C2.66217%2014.3372%202.51966%2014.869%202.5889%2015.3949C2.64082%2015.7893%202.87379%2016.1928%203.33973%2016.9999C3.80568%2017.8069%204.03865%2018.2104%204.35426%2018.4526C4.77508%2018.7755%205.30694%2018.918%205.83284%2018.8488C6.07287%2018.8172%206.31628%2018.7185%206.65196%2018.5411C7.14544%2018.2803%207.73558%2018.2699%208.21895%2018.549C8.70227%2018.8281%208.98827%2019.3443%209.00912%2019.902C9.02332%2020.2815%209.05958%2020.5417%209.15224%2020.7654C9.35523%2021.2554%209.74458%2021.6448%2010.2346%2021.8478C10.6022%2022%2011.0681%2022%2012%2022C12.9319%2022%2013.3978%2022%2013.7654%2021.8478C14.2554%2021.6448%2014.6448%2021.2554%2014.8478%2020.7654C14.9404%2020.5417%2014.9767%2020.2815%2014.9909%2019.9021C15.0117%2019.3443%2015.2977%2018.8281%2015.7811%2018.549C16.2644%2018.27%2016.8545%2018.2804%2017.3479%2018.5412C17.6837%2018.7186%2017.9271%2018.8173%2018.1671%2018.8489C18.693%2018.9182%2019.2249%2018.7756%2019.6457%2018.4527C19.9613%2018.2106%2020.1943%2017.807%2020.6603%2017C20.8677%2016.6407%2021.029%2016.3614%2021.1486%2016.1272M20.3387%2013.3608C19.8662%2013.0639%2019.5622%2012.5581%2019.5621%2012.0001C19.5621%2011.442%2019.8662%2010.9361%2020.3387%2010.6392C20.6603%2010.4372%2020.8674%2010.2757%2021.0148%2010.0836C21.3377%209.66278%2021.4802%209.13092%2021.411%208.60502C21.3591%208.2106%2021.1261%207.80708%2020.6601%207.00005C20.1942%206.19301%2019.9612%205.7895%2019.6456%205.54732C19.2248%205.22441%2018.6929%205.0819%2018.167%205.15113C17.927%205.18274%2017.6836%205.2814%2017.3479%205.45883C16.8544%205.71964%2016.2643%205.73004%2015.781%205.45096C15.2977%205.1719%2015.0117%204.6557%2014.9909%204.09803C14.9767%203.71852%2014.9404%203.45835%2014.8478%203.23463C14.6448%202.74458%2014.2554%202.35523%2013.7654%202.15224C13.3978%202%2012.9319%202%2012%202C11.0681%202%2010.6022%202%2010.2346%202.15224C9.74458%202.35523%209.35523%202.74458%209.15224%203.23463C9.05958%203.45833%209.02332%203.71848%209.00912%204.09794C8.98826%204.65566%208.70225%205.17191%208.21891%205.45096C7.73557%205.73002%207.14548%205.71959%206.65205%205.4588C6.31633%205.28136%206.0729%205.18269%205.83285%205.15108C5.30695%205.08185%204.77509%205.22436%204.35427%205.54727C4.03866%205.78945%203.80569%206.19297%203.33974%207C3.13231%207.35929%202.97105%207.63859%202.85138%207.87273%22%2F%3E%3C%2Fg%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%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M3.66122%2010.6392C4.13377%2010.9361%204.43782%2011.4419%204.43782%2011.9999C4.43781%2012.558%204.13376%2013.0638%203.66122%2013.3607C3.33966%2013.5627%203.13248%2013.7242%202.98508%2013.9163C2.66217%2014.3372%202.51966%2014.869%202.5889%2015.3949C2.64082%2015.7893%202.87379%2016.1928%203.33973%2016.9999C3.80568%2017.8069%204.03865%2018.2104%204.35426%2018.4526C4.77508%2018.7755%205.30694%2018.918%205.83284%2018.8488C6.07287%2018.8172%206.31628%2018.7185%206.65196%2018.5411C7.14544%2018.2803%207.73558%2018.2699%208.21895%2018.549C8.70227%2018.8281%208.98827%2019.3443%209.00912%2019.902C9.02332%2020.2815%209.05958%2020.5417%209.15224%2020.7654C9.35523%2021.2554%209.74458%2021.6448%2010.2346%2021.8478C10.6022%2022%2011.0681%2022%2012%2022C12.9319%2022%2013.3978%2022%2013.7654%2021.8478C14.2554%2021.6448%2014.6448%2021.2554%2014.8478%2020.7654C14.9404%2020.5417%2014.9767%2020.2815%2014.9909%2019.9021C15.0117%2019.3443%2015.2977%2018.8281%2015.7811%2018.549C16.2644%2018.27%2016.8545%2018.2804%2017.3479%2018.5412C17.6837%2018.7186%2017.9271%2018.8173%2018.1671%2018.8489C18.693%2018.9182%2019.2249%2018.7756%2019.6457%2018.4527C19.9613%2018.2106%2020.1943%2017.807%2020.6603%2017C20.8677%2016.6407%2021.029%2016.3614%2021.1486%2016.1272M20.3387%2013.3608C19.8662%2013.0639%2019.5622%2012.5581%2019.5621%2012.0001C19.5621%2011.442%2019.8662%2010.9361%2020.3387%2010.6392C20.6603%2010.4372%2020.8674%2010.2757%2021.0148%2010.0836C21.3377%209.66278%2021.4802%209.13092%2021.411%208.60502C21.3591%208.2106%2021.1261%207.80708%2020.6601%207.00005C20.1942%206.19301%2019.9612%205.7895%2019.6456%205.54732C19.2248%205.22441%2018.6929%205.0819%2018.167%205.15113C17.927%205.18274%2017.6836%205.2814%2017.3479%205.45883C16.8544%205.71964%2016.2643%205.73004%2015.781%205.45096C15.2977%205.1719%2015.0117%204.6557%2014.9909%204.09803C14.9767%203.71852%2014.9404%203.45835%2014.8478%203.23463C14.6448%202.74458%2014.2554%202.35523%2013.7654%202.15224C13.3978%202%2012.9319%202%2012%202C11.0681%202%2010.6022%202%2010.2346%202.15224C9.74458%202.35523%209.35523%202.74458%209.15224%203.23463C9.05958%203.45833%209.02332%203.71848%209.00912%204.09794C8.98826%204.65566%208.70225%205.17191%208.21891%205.45096C7.73557%205.73002%207.14548%205.71959%206.65205%205.4588C6.31633%205.28136%206.0729%205.18269%205.83285%205.15108C5.30695%205.08185%204.77509%205.22436%204.35427%205.54727C4.03866%205.78945%203.80569%206.19297%203.33974%207C3.13231%207.35929%202.97105%207.63859%202.85138%207.87273%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

给 settings-broken 加一点动效

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

settings-broken 呼吸动效演示

呼吸

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

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

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

旋转

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

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

@keyframes icon-spin {
  to { transform: rotate(360deg); }
}
settings-broken 描画动效演示

描画

线条从无到有依次绘出,适合线性图标与首屏引导。

css描画动效样式
.icon-settings-broken path {
  stroke-dasharray: 120;
  animation: icon-draw 1.2s ease forwards;
}

@keyframes icon-draw {
  from { stroke-dashoffset: 120; }
  to { stroke-dashoffset: 0; }
}

SVG 健康报告

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

文件体积

2.21 KB

2,260 字节

viewBox

0 0 24 24

矢量坐标系

图元总数

2

<path> ×1

风格

单色轮廓(描边)

描边可随字号加粗

同时含 width/height 与 viewBox:可以只保留 viewBox,让图标跟随容器自适应缩放。 文件体积 2.21 KB(2,260 字节),图元 2 个,风格为单色轮廓(描边)。

常见问题

关于 settings-broken 图标的下载、商用与改色。

settings-broken 图标是什么?▾

它是 Solar(solar)开源图标集中的 settings-broken 图标,单色轮廓(描边),viewBox 为 0 0 24 24,文件仅 2.21 KB,矢量格式可无损缩放到任意尺寸。

如何下载 settings-broken 图标?▾

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

settings-broken 图标可以商用吗?▾

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

如何修改 settings-broken 图标的颜色?▾

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

Solar 中的相近图标

settings-bold
settings-bold-duotone
settings-line-duotone
settings-linear
settings-outline
settings-minimalistic-bold
settings-minimalistic-bold-duotone
settings-minimalistic-broken
settings-minimalistic-line-duotone
settings-minimalistic-linear
settings-minimalistic-outline