找找图标

设置 SVG 图标

withicons-rangolisettings

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

图标 ID
withicons-rangoli:settings
中文名
设置
所属集合
with icons Rangoli
集合规模
1,000 枚
基础网格
24px
色彩
多色
开源协议
MIT
作者
Evergrow

下载 设置 图标

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

px

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

设置 的预览与使用场景

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

预览颜色
设置 图标 浅色背景预览浅色背景
设置 图标 深色背景预览深色背景
设置 图标 灰底融入预览灰底融入

在真实界面里长这样

继续按钮内 · 主操作
搜索设置…输入框 · 前缀图标
设置导航菜单 · 选中态
暂无内容空状态 · 引导提示
9:41设置 App 图标设置settings-2手机桌面 · App 图标
设置withicons-rangoli.design/icons/settings浏览器 · 标签页与站点图标

各尺寸下的可读性

设置 图标 24px 渲染24px设置 图标 32px 渲染32px设置 图标 48px 渲染48px设置 图标 64px 渲染64px设置 图标 96px 渲染96px设置 图标 128px 渲染128px

复制 设置 图标代码

内联 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"><defs><radialGradient id="SVGssztEN0r" cx="7.42" cy="6.18" r="26.47" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffb21f"/><stop offset=".3" stop-color="#ffb21f"/><stop offset="1" stop-color="#f2462c"/></radialGradient><linearGradient id="SVGDCUexbkg" x1="4" x2="20" y1="3" y2="21" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e81f7a"/><stop offset="1" stop-color="#7b2fe0"/></linearGradient></defs><path fill="#5a1240" fill-opacity=".5" d="m3.4 6.63l-.08.17l.11.4L4.5 8.67l.13-.27l-.03-.1zm7.7.86l-.8.24l-.8.41c-.95.49-2.08 2.16-2.05 3.26l.05.16c.33-1.12.9-2.35 2-2.92l.8-.41l.8-.24l.9-.09l.9.09l.8.24l.8.41c.52.27 1.09.84 1.36 1.36l.41.8l.23.76l.05-.16c0-.51-.22-1.18-.51-1.6l-.55-.8l-.63-.6c-.45-.43-1.35-.85-1.96-.91L12 7.4zm-9.5 6.29l-.1.02c.08.47.25.94.8 1.03l1.9.3l.3.67l.13-.2l-.43-.97l-2-.33c-.31-.05-.44-.3-.6-.52m20.8 0c-.16.22-.29.47-.6.52l-2 .33l-.43.97l.13.21l.3-.68l1.9-.3c.55-.09.72-.56.8-1.03zm-19 4.37l-.08.15c-.02.18.11.47.23.6l2 2c.26.27.82.4 1.15.17l1.7-1.21l.9.38c.12.05.05.12.1.23c-.01-.22.01-.45-.03-.67l-.97-.44l-1.7 1.21c-.37.26-.91.07-1.2-.22l-1.9-1.9zm17.2 0l-.2.3l-1.9 1.9c-.94.95-2.23-.51-2.9-.98l-.97.43c-.04.22-.02.45-.03.67c.05-.11-.02-.18.1-.23l.9-.37c.53.37 1.95 1.93 2.85 1.03l2-2c.12-.13.25-.42.23-.6zM9.7 21.81l-.06.09c-.13 1.75 3.18 1.1 3.66 1.1c.61-.01.98-.42 1.06-1c.01-.07-.06-.12-.06-.19c-.19.29-.37.68-.8.68l-2.9.01c-.46 0-.71-.33-.9-.69" class="wm-shadow"/><path fill="url(#SVGssztEN0r)" d="M9.7 2.19L9.39 4.1c-.01.08-.01.12-.09.16l-.9.38l-1.7-1.21c-.33-.23-.88-.1-1.15.17L3.5 5.67c-.76.76 1.05 2.62 1.13 2.73l-.43.97l-2 .33c-.38.06-.7.53-.7.9l.01 2.9c.01 1.29 2.54.72 2.75 1.2l.37.9c-.37.53-1.93 1.96-1.03 2.85l2.07 2.05c.78.77 2.53-1 2.73-1.14l.97.44l.33 2c.06.38.53.7.9.7l2.9-.01c1.29-.01.72-2.55 1.2-2.75l.9-.37c.53.37 1.96 1.93 2.85 1.03l2.05-2.07c.76-.76-1.05-2.62-1.13-2.73l.43-.97l2-.33c.38-.06.7-.53.7-.9l-.01-2.9c-.01-1.12-2.37-1.08-2.69-1.13l-.4-.84c-.38.09-.63.17-1 .17c-1.7-.02-3.08-1.4-3.1-3.1c0-.37.08-.63.16-1l-.83-.4l-.33-2c-.06-.38-.53-.7-.9-.7h-2.8c-.36 0-.84.31-.9.69m1.36 5.31l.94-.1l.9.09l.8.24l.8.41c.16.08.7.53.8.66l.56.7l.41.8l.24.8l.09.9l-.09.9l-.24.8l-.41.8c-.08.16-.53.7-.66.8l-.7.56l-.8.41l-.8.24l-.9.09l-.9-.09l-.8-.24l-.8-.41c-.16-.08-.7-.53-.8-.66l-.56-.7l-.41-.8l-.24-.8l-.09-.9l.09-.9l.24-.8l.41-.8l.66-.8l.7-.56l.8-.41z" class="wm-k"/><path fill="url(#SVGDCUexbkg)" d="M11.2 8.08c-.74.15-1.46.53-2 1.06c-2.8 2.81-.29 7.54 3.6 6.78c.74-.15 1.46-.53 2-1.07c2.8-2.8.29-7.53-3.6-6.77m.19 2.02c2.78-.67 3.45 3.05 1.41 3.73c-2.97.99-3.74-3.16-1.41-3.73" class="wm-a"/><path fill="#fff" fill-opacity=".7" d="m10.2 2.3l-.34 2c-.03.16-.21.35-.36.42l-1 .41c-.28.11-.77-.32-.9-.4l-.02.07l.92.65c.14.1.35.11.5.05l.93-.4c.9-.38.02-2.7 1.17-2.7h2.56l.11-.1c-.15-.1-.06-.3-.47-.3h-2.6c-.16 0-.47.09-.5.3m-6 4.62l.09-.02c-.05-.24-.12-.41.07-.6L6.3 4.36c.33-.33.72.02 1 .22l.02-.08l-.82-.59c-.25-.19-.52-.04-.7.14L3.89 6c-.06.07-.08.32-.04.4zm.6.67l-.09.01c.1.14.53.61.41.9l-.41 1c-.06.15-.25.33-.41.36l-1.9.31c-.9.15-.44 3.27-.3 3.46l.2.17c.1-.18.11-.03.11-.2l-.01-2.5c0-1.15 2.31-.25 2.7-1.17L5.49 9c.06-.15.06-.37-.04-.5z" class="wm-shine"/><path fill="#ffc21a" d="M18.4 3.68q.89-.82 1.13.37q1.2-.14.7.96q1.05.59 0 1.18q.5 1.1-.7.96q-.24 1.19-1.13.37q-.89.82-1.13-.37q-1.2.14-.7-.96q-1.05-.59 0-1.18q-.5-1.1.7-.96q.24-1.19 1.13-.37" class="wm-deco"/><path fill="url(#SVGDCUexbkg)" d="M18.84 4.54q.78-.16.62.62q.67.44 0 .88q.16.78-.62.62q-.44.67-.88 0q-.78.16-.62-.62q-.67-.44 0-.88q-.16-.78.62-.62q.44-.67.88 0" class="wm-deco"/><path fill="#5a1240" d="M17.87 5.6a.53.53 0 1 0 1.06 0a.53.53 0 1 0-1.06 0" class="wm-deco"/></g></svg>
reactReact 组件(TSX)
export function SettingsIcon(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"><defs><radialGradient id="SVGssztEN0r" cx="7.42" cy="6.18" r="26.47" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffb21f"/><stop offset=".3" stop-color="#ffb21f"/><stop offset="1" stop-color="#f2462c"/></radialGradient><linearGradient id="SVGDCUexbkg" x1="4" x2="20" y1="3" y2="21" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e81f7a"/><stop offset="1" stop-color="#7b2fe0"/></linearGradient></defs><path fill="#5a1240" fill-opacity=".5" d="m3.4 6.63l-.08.17l.11.4L4.5 8.67l.13-.27l-.03-.1zm7.7.86l-.8.24l-.8.41c-.95.49-2.08 2.16-2.05 3.26l.05.16c.33-1.12.9-2.35 2-2.92l.8-.41l.8-.24l.9-.09l.9.09l.8.24l.8.41c.52.27 1.09.84 1.36 1.36l.41.8l.23.76l.05-.16c0-.51-.22-1.18-.51-1.6l-.55-.8l-.63-.6c-.45-.43-1.35-.85-1.96-.91L12 7.4zm-9.5 6.29l-.1.02c.08.47.25.94.8 1.03l1.9.3l.3.67l.13-.2l-.43-.97l-2-.33c-.31-.05-.44-.3-.6-.52m20.8 0c-.16.22-.29.47-.6.52l-2 .33l-.43.97l.13.21l.3-.68l1.9-.3c.55-.09.72-.56.8-1.03zm-19 4.37l-.08.15c-.02.18.11.47.23.6l2 2c.26.27.82.4 1.15.17l1.7-1.21l.9.38c.12.05.05.12.1.23c-.01-.22.01-.45-.03-.67l-.97-.44l-1.7 1.21c-.37.26-.91.07-1.2-.22l-1.9-1.9zm17.2 0l-.2.3l-1.9 1.9c-.94.95-2.23-.51-2.9-.98l-.97.43c-.04.22-.02.45-.03.67c.05-.11-.02-.18.1-.23l.9-.37c.53.37 1.95 1.93 2.85 1.03l2-2c.12-.13.25-.42.23-.6zM9.7 21.81l-.06.09c-.13 1.75 3.18 1.1 3.66 1.1c.61-.01.98-.42 1.06-1c.01-.07-.06-.12-.06-.19c-.19.29-.37.68-.8.68l-2.9.01c-.46 0-.71-.33-.9-.69" class="wm-shadow"/><path fill="url(#SVGssztEN0r)" d="M9.7 2.19L9.39 4.1c-.01.08-.01.12-.09.16l-.9.38l-1.7-1.21c-.33-.23-.88-.1-1.15.17L3.5 5.67c-.76.76 1.05 2.62 1.13 2.73l-.43.97l-2 .33c-.38.06-.7.53-.7.9l.01 2.9c.01 1.29 2.54.72 2.75 1.2l.37.9c-.37.53-1.93 1.96-1.03 2.85l2.07 2.05c.78.77 2.53-1 2.73-1.14l.97.44l.33 2c.06.38.53.7.9.7l2.9-.01c1.29-.01.72-2.55 1.2-2.75l.9-.37c.53.37 1.96 1.93 2.85 1.03l2.05-2.07c.76-.76-1.05-2.62-1.13-2.73l.43-.97l2-.33c.38-.06.7-.53.7-.9l-.01-2.9c-.01-1.12-2.37-1.08-2.69-1.13l-.4-.84c-.38.09-.63.17-1 .17c-1.7-.02-3.08-1.4-3.1-3.1c0-.37.08-.63.16-1l-.83-.4l-.33-2c-.06-.38-.53-.7-.9-.7h-2.8c-.36 0-.84.31-.9.69m1.36 5.31l.94-.1l.9.09l.8.24l.8.41c.16.08.7.53.8.66l.56.7l.41.8l.24.8l.09.9l-.09.9l-.24.8l-.41.8c-.08.16-.53.7-.66.8l-.7.56l-.8.41l-.8.24l-.9.09l-.9-.09l-.8-.24l-.8-.41c-.16-.08-.7-.53-.8-.66l-.56-.7l-.41-.8l-.24-.8l-.09-.9l.09-.9l.24-.8l.41-.8l.66-.8l.7-.56l.8-.41z" class="wm-k"/><path fill="url(#SVGDCUexbkg)" d="M11.2 8.08c-.74.15-1.46.53-2 1.06c-2.8 2.81-.29 7.54 3.6 6.78c.74-.15 1.46-.53 2-1.07c2.8-2.8.29-7.53-3.6-6.77m.19 2.02c2.78-.67 3.45 3.05 1.41 3.73c-2.97.99-3.74-3.16-1.41-3.73" class="wm-a"/><path fill="#fff" fill-opacity=".7" d="m10.2 2.3l-.34 2c-.03.16-.21.35-.36.42l-1 .41c-.28.11-.77-.32-.9-.4l-.02.07l.92.65c.14.1.35.11.5.05l.93-.4c.9-.38.02-2.7 1.17-2.7h2.56l.11-.1c-.15-.1-.06-.3-.47-.3h-2.6c-.16 0-.47.09-.5.3m-6 4.62l.09-.02c-.05-.24-.12-.41.07-.6L6.3 4.36c.33-.33.72.02 1 .22l.02-.08l-.82-.59c-.25-.19-.52-.04-.7.14L3.89 6c-.06.07-.08.32-.04.4zm.6.67l-.09.01c.1.14.53.61.41.9l-.41 1c-.06.15-.25.33-.41.36l-1.9.31c-.9.15-.44 3.27-.3 3.46l.2.17c.1-.18.11-.03.11-.2l-.01-2.5c0-1.15 2.31-.25 2.7-1.17L5.49 9c.06-.15.06-.37-.04-.5z" class="wm-shine"/><path fill="#ffc21a" d="M18.4 3.68q.89-.82 1.13.37q1.2-.14.7.96q1.05.59 0 1.18q.5 1.1-.7.96q-.24 1.19-1.13.37q-.89.82-1.13-.37q-1.2.14-.7-.96q-1.05-.59 0-1.18q-.5-1.1.7-.96q.24-1.19 1.13-.37" class="wm-deco"/><path fill="url(#SVGDCUexbkg)" d="M18.84 4.54q.78-.16.62.62q.67.44 0 .88q.16.78-.62.62q-.44.67-.88 0q-.78.16-.62-.62q-.67-.44 0-.88q-.16-.78.62-.62q.44-.67.88 0" class="wm-deco"/><path fill="#5a1240" d="M17.87 5.6a.53.53 0 1 0 1.06 0a.53.53 0 1 0-1.06 0" class="wm-deco"/></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"><defs><radialGradient id="SVGssztEN0r" cx="7.42" cy="6.18" r="26.47" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffb21f"/><stop offset=".3" stop-color="#ffb21f"/><stop offset="1" stop-color="#f2462c"/></radialGradient><linearGradient id="SVGDCUexbkg" x1="4" x2="20" y1="3" y2="21" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e81f7a"/><stop offset="1" stop-color="#7b2fe0"/></linearGradient></defs><path fill="#5a1240" fill-opacity=".5" d="m3.4 6.63l-.08.17l.11.4L4.5 8.67l.13-.27l-.03-.1zm7.7.86l-.8.24l-.8.41c-.95.49-2.08 2.16-2.05 3.26l.05.16c.33-1.12.9-2.35 2-2.92l.8-.41l.8-.24l.9-.09l.9.09l.8.24l.8.41c.52.27 1.09.84 1.36 1.36l.41.8l.23.76l.05-.16c0-.51-.22-1.18-.51-1.6l-.55-.8l-.63-.6c-.45-.43-1.35-.85-1.96-.91L12 7.4zm-9.5 6.29l-.1.02c.08.47.25.94.8 1.03l1.9.3l.3.67l.13-.2l-.43-.97l-2-.33c-.31-.05-.44-.3-.6-.52m20.8 0c-.16.22-.29.47-.6.52l-2 .33l-.43.97l.13.21l.3-.68l1.9-.3c.55-.09.72-.56.8-1.03zm-19 4.37l-.08.15c-.02.18.11.47.23.6l2 2c.26.27.82.4 1.15.17l1.7-1.21l.9.38c.12.05.05.12.1.23c-.01-.22.01-.45-.03-.67l-.97-.44l-1.7 1.21c-.37.26-.91.07-1.2-.22l-1.9-1.9zm17.2 0l-.2.3l-1.9 1.9c-.94.95-2.23-.51-2.9-.98l-.97.43c-.04.22-.02.45-.03.67c.05-.11-.02-.18.1-.23l.9-.37c.53.37 1.95 1.93 2.85 1.03l2-2c.12-.13.25-.42.23-.6zM9.7 21.81l-.06.09c-.13 1.75 3.18 1.1 3.66 1.1c.61-.01.98-.42 1.06-1c.01-.07-.06-.12-.06-.19c-.19.29-.37.68-.8.68l-2.9.01c-.46 0-.71-.33-.9-.69" class="wm-shadow"/><path fill="url(#SVGssztEN0r)" d="M9.7 2.19L9.39 4.1c-.01.08-.01.12-.09.16l-.9.38l-1.7-1.21c-.33-.23-.88-.1-1.15.17L3.5 5.67c-.76.76 1.05 2.62 1.13 2.73l-.43.97l-2 .33c-.38.06-.7.53-.7.9l.01 2.9c.01 1.29 2.54.72 2.75 1.2l.37.9c-.37.53-1.93 1.96-1.03 2.85l2.07 2.05c.78.77 2.53-1 2.73-1.14l.97.44l.33 2c.06.38.53.7.9.7l2.9-.01c1.29-.01.72-2.55 1.2-2.75l.9-.37c.53.37 1.96 1.93 2.85 1.03l2.05-2.07c.76-.76-1.05-2.62-1.13-2.73l.43-.97l2-.33c.38-.06.7-.53.7-.9l-.01-2.9c-.01-1.12-2.37-1.08-2.69-1.13l-.4-.84c-.38.09-.63.17-1 .17c-1.7-.02-3.08-1.4-3.1-3.1c0-.37.08-.63.16-1l-.83-.4l-.33-2c-.06-.38-.53-.7-.9-.7h-2.8c-.36 0-.84.31-.9.69m1.36 5.31l.94-.1l.9.09l.8.24l.8.41c.16.08.7.53.8.66l.56.7l.41.8l.24.8l.09.9l-.09.9l-.24.8l-.41.8c-.08.16-.53.7-.66.8l-.7.56l-.8.41l-.8.24l-.9.09l-.9-.09l-.8-.24l-.8-.41c-.16-.08-.7-.53-.8-.66l-.56-.7l-.41-.8l-.24-.8l-.09-.9l.09-.9l.24-.8l.41-.8l.66-.8l.7-.56l.8-.41z" class="wm-k"/><path fill="url(#SVGDCUexbkg)" d="M11.2 8.08c-.74.15-1.46.53-2 1.06c-2.8 2.81-.29 7.54 3.6 6.78c.74-.15 1.46-.53 2-1.07c2.8-2.8.29-7.53-3.6-6.77m.19 2.02c2.78-.67 3.45 3.05 1.41 3.73c-2.97.99-3.74-3.16-1.41-3.73" class="wm-a"/><path fill="#fff" fill-opacity=".7" d="m10.2 2.3l-.34 2c-.03.16-.21.35-.36.42l-1 .41c-.28.11-.77-.32-.9-.4l-.02.07l.92.65c.14.1.35.11.5.05l.93-.4c.9-.38.02-2.7 1.17-2.7h2.56l.11-.1c-.15-.1-.06-.3-.47-.3h-2.6c-.16 0-.47.09-.5.3m-6 4.62l.09-.02c-.05-.24-.12-.41.07-.6L6.3 4.36c.33-.33.72.02 1 .22l.02-.08l-.82-.59c-.25-.19-.52-.04-.7.14L3.89 6c-.06.07-.08.32-.04.4zm.6.67l-.09.01c.1.14.53.61.41.9l-.41 1c-.06.15-.25.33-.41.36l-1.9.31c-.9.15-.44 3.27-.3 3.46l.2.17c.1-.18.11-.03.11-.2l-.01-2.5c0-1.15 2.31-.25 2.7-1.17L5.49 9c.06-.15.06-.37-.04-.5z" class="wm-shine"/><path fill="#ffc21a" d="M18.4 3.68q.89-.82 1.13.37q1.2-.14.7.96q1.05.59 0 1.18q.5 1.1-.7.96q-.24 1.19-1.13.37q-.89.82-1.13-.37q-1.2.14-.7-.96q-1.05-.59 0-1.18q-.5-1.1.7-.96q.24-1.19 1.13-.37" class="wm-deco"/><path fill="url(#SVGDCUexbkg)" d="M18.84 4.54q.78-.16.62.62q.67.44 0 .88q.16.78-.62.62q-.44.67-.88 0q-.78.16-.62-.62q-.67-.44 0-.88q-.16-.78.62-.62q.44-.67.88 0" class="wm-deco"/><path fill="#5a1240" d="M17.87 5.6a.53.53 0 1 0 1.06 0a.53.53 0 1 0-1.06 0" class="wm-deco"/></g>`;
</script>
cssCSS mask(随 currentColor 改色)
.settings {
  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%3E%3Cdefs%3E%3CradialGradient%20id%3D%22SVGssztEN0r%22%20cx%3D%227.42%22%20cy%3D%226.18%22%20r%3D%2226.47%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffb21f%22%2F%3E%3Cstop%20offset%3D%22.3%22%20stop-color%3D%22%23ffb21f%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23f2462c%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22SVGDCUexbkg%22%20x1%3D%224%22%20x2%3D%2220%22%20y1%3D%223%22%20y2%3D%2221%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23e81f7a%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%237b2fe0%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%235a1240%22%20fill-opacity%3D%22.5%22%20d%3D%22m3.4%206.63l-.08.17l.11.4L4.5%208.67l.13-.27l-.03-.1zm7.7.86l-.8.24l-.8.41c-.95.49-2.08%202.16-2.05%203.26l.05.16c.33-1.12.9-2.35%202-2.92l.8-.41l.8-.24l.9-.09l.9.09l.8.24l.8.41c.52.27%201.09.84%201.36%201.36l.41.8l.23.76l.05-.16c0-.51-.22-1.18-.51-1.6l-.55-.8l-.63-.6c-.45-.43-1.35-.85-1.96-.91L12%207.4zm-9.5%206.29l-.1.02c.08.47.25.94.8%201.03l1.9.3l.3.67l.13-.2l-.43-.97l-2-.33c-.31-.05-.44-.3-.6-.52m20.8%200c-.16.22-.29.47-.6.52l-2%20.33l-.43.97l.13.21l.3-.68l1.9-.3c.55-.09.72-.56.8-1.03zm-19%204.37l-.08.15c-.02.18.11.47.23.6l2%202c.26.27.82.4%201.15.17l1.7-1.21l.9.38c.12.05.05.12.1.23c-.01-.22.01-.45-.03-.67l-.97-.44l-1.7%201.21c-.37.26-.91.07-1.2-.22l-1.9-1.9zm17.2%200l-.2.3l-1.9%201.9c-.94.95-2.23-.51-2.9-.98l-.97.43c-.04.22-.02.45-.03.67c.05-.11-.02-.18.1-.23l.9-.37c.53.37%201.95%201.93%202.85%201.03l2-2c.12-.13.25-.42.23-.6zM9.7%2021.81l-.06.09c-.13%201.75%203.18%201.1%203.66%201.1c.61-.01.98-.42%201.06-1c.01-.07-.06-.12-.06-.19c-.19.29-.37.68-.8.68l-2.9.01c-.46%200-.71-.33-.9-.69%22%20class%3D%22wm-shadow%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGssztEN0r)%22%20d%3D%22M9.7%202.19L9.39%204.1c-.01.08-.01.12-.09.16l-.9.38l-1.7-1.21c-.33-.23-.88-.1-1.15.17L3.5%205.67c-.76.76%201.05%202.62%201.13%202.73l-.43.97l-2%20.33c-.38.06-.7.53-.7.9l.01%202.9c.01%201.29%202.54.72%202.75%201.2l.37.9c-.37.53-1.93%201.96-1.03%202.85l2.07%202.05c.78.77%202.53-1%202.73-1.14l.97.44l.33%202c.06.38.53.7.9.7l2.9-.01c1.29-.01.72-2.55%201.2-2.75l.9-.37c.53.37%201.96%201.93%202.85%201.03l2.05-2.07c.76-.76-1.05-2.62-1.13-2.73l.43-.97l2-.33c.38-.06.7-.53.7-.9l-.01-2.9c-.01-1.12-2.37-1.08-2.69-1.13l-.4-.84c-.38.09-.63.17-1%20.17c-1.7-.02-3.08-1.4-3.1-3.1c0-.37.08-.63.16-1l-.83-.4l-.33-2c-.06-.38-.53-.7-.9-.7h-2.8c-.36%200-.84.31-.9.69m1.36%205.31l.94-.1l.9.09l.8.24l.8.41c.16.08.7.53.8.66l.56.7l.41.8l.24.8l.09.9l-.09.9l-.24.8l-.41.8c-.08.16-.53.7-.66.8l-.7.56l-.8.41l-.8.24l-.9.09l-.9-.09l-.8-.24l-.8-.41c-.16-.08-.7-.53-.8-.66l-.56-.7l-.41-.8l-.24-.8l-.09-.9l.09-.9l.24-.8l.41-.8l.66-.8l.7-.56l.8-.41z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGDCUexbkg)%22%20d%3D%22M11.2%208.08c-.74.15-1.46.53-2%201.06c-2.8%202.81-.29%207.54%203.6%206.78c.74-.15%201.46-.53%202-1.07c2.8-2.8.29-7.53-3.6-6.77m.19%202.02c2.78-.67%203.45%203.05%201.41%203.73c-2.97.99-3.74-3.16-1.41-3.73%22%20class%3D%22wm-a%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.7%22%20d%3D%22m10.2%202.3l-.34%202c-.03.16-.21.35-.36.42l-1%20.41c-.28.11-.77-.32-.9-.4l-.02.07l.92.65c.14.1.35.11.5.05l.93-.4c.9-.38.02-2.7%201.17-2.7h2.56l.11-.1c-.15-.1-.06-.3-.47-.3h-2.6c-.16%200-.47.09-.5.3m-6%204.62l.09-.02c-.05-.24-.12-.41.07-.6L6.3%204.36c.33-.33.72.02%201%20.22l.02-.08l-.82-.59c-.25-.19-.52-.04-.7.14L3.89%206c-.06.07-.08.32-.04.4zm.6.67l-.09.01c.1.14.53.61.41.9l-.41%201c-.06.15-.25.33-.41.36l-1.9.31c-.9.15-.44%203.27-.3%203.46l.2.17c.1-.18.11-.03.11-.2l-.01-2.5c0-1.15%202.31-.25%202.7-1.17L5.49%209c.06-.15.06-.37-.04-.5z%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%23ffc21a%22%20d%3D%22M18.4%203.68q.89-.82%201.13.37q1.2-.14.7.96q1.05.59%200%201.18q.5%201.1-.7.96q-.24%201.19-1.13.37q-.89.82-1.13-.37q-1.2.14-.7-.96q-1.05-.59%200-1.18q-.5-1.1.7-.96q.24-1.19%201.13-.37%22%20class%3D%22wm-deco%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGDCUexbkg)%22%20d%3D%22M18.84%204.54q.78-.16.62.62q.67.44%200%20.88q.16.78-.62.62q-.44.67-.88%200q-.78.16-.62-.62q-.67-.44%200-.88q-.16-.78.62-.62q.44-.67.88%200%22%20class%3D%22wm-deco%22%2F%3E%3Cpath%20fill%3D%22%235a1240%22%20d%3D%22M17.87%205.6a.53.53%200%201%200%201.06%200a.53.53%200%201%200-1.06%200%22%20class%3D%22wm-deco%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%3E%3Cdefs%3E%3CradialGradient%20id%3D%22SVGssztEN0r%22%20cx%3D%227.42%22%20cy%3D%226.18%22%20r%3D%2226.47%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffb21f%22%2F%3E%3Cstop%20offset%3D%22.3%22%20stop-color%3D%22%23ffb21f%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23f2462c%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22SVGDCUexbkg%22%20x1%3D%224%22%20x2%3D%2220%22%20y1%3D%223%22%20y2%3D%2221%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23e81f7a%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%237b2fe0%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%235a1240%22%20fill-opacity%3D%22.5%22%20d%3D%22m3.4%206.63l-.08.17l.11.4L4.5%208.67l.13-.27l-.03-.1zm7.7.86l-.8.24l-.8.41c-.95.49-2.08%202.16-2.05%203.26l.05.16c.33-1.12.9-2.35%202-2.92l.8-.41l.8-.24l.9-.09l.9.09l.8.24l.8.41c.52.27%201.09.84%201.36%201.36l.41.8l.23.76l.05-.16c0-.51-.22-1.18-.51-1.6l-.55-.8l-.63-.6c-.45-.43-1.35-.85-1.96-.91L12%207.4zm-9.5%206.29l-.1.02c.08.47.25.94.8%201.03l1.9.3l.3.67l.13-.2l-.43-.97l-2-.33c-.31-.05-.44-.3-.6-.52m20.8%200c-.16.22-.29.47-.6.52l-2%20.33l-.43.97l.13.21l.3-.68l1.9-.3c.55-.09.72-.56.8-1.03zm-19%204.37l-.08.15c-.02.18.11.47.23.6l2%202c.26.27.82.4%201.15.17l1.7-1.21l.9.38c.12.05.05.12.1.23c-.01-.22.01-.45-.03-.67l-.97-.44l-1.7%201.21c-.37.26-.91.07-1.2-.22l-1.9-1.9zm17.2%200l-.2.3l-1.9%201.9c-.94.95-2.23-.51-2.9-.98l-.97.43c-.04.22-.02.45-.03.67c.05-.11-.02-.18.1-.23l.9-.37c.53.37%201.95%201.93%202.85%201.03l2-2c.12-.13.25-.42.23-.6zM9.7%2021.81l-.06.09c-.13%201.75%203.18%201.1%203.66%201.1c.61-.01.98-.42%201.06-1c.01-.07-.06-.12-.06-.19c-.19.29-.37.68-.8.68l-2.9.01c-.46%200-.71-.33-.9-.69%22%20class%3D%22wm-shadow%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGssztEN0r)%22%20d%3D%22M9.7%202.19L9.39%204.1c-.01.08-.01.12-.09.16l-.9.38l-1.7-1.21c-.33-.23-.88-.1-1.15.17L3.5%205.67c-.76.76%201.05%202.62%201.13%202.73l-.43.97l-2%20.33c-.38.06-.7.53-.7.9l.01%202.9c.01%201.29%202.54.72%202.75%201.2l.37.9c-.37.53-1.93%201.96-1.03%202.85l2.07%202.05c.78.77%202.53-1%202.73-1.14l.97.44l.33%202c.06.38.53.7.9.7l2.9-.01c1.29-.01.72-2.55%201.2-2.75l.9-.37c.53.37%201.96%201.93%202.85%201.03l2.05-2.07c.76-.76-1.05-2.62-1.13-2.73l.43-.97l2-.33c.38-.06.7-.53.7-.9l-.01-2.9c-.01-1.12-2.37-1.08-2.69-1.13l-.4-.84c-.38.09-.63.17-1%20.17c-1.7-.02-3.08-1.4-3.1-3.1c0-.37.08-.63.16-1l-.83-.4l-.33-2c-.06-.38-.53-.7-.9-.7h-2.8c-.36%200-.84.31-.9.69m1.36%205.31l.94-.1l.9.09l.8.24l.8.41c.16.08.7.53.8.66l.56.7l.41.8l.24.8l.09.9l-.09.9l-.24.8l-.41.8c-.08.16-.53.7-.66.8l-.7.56l-.8.41l-.8.24l-.9.09l-.9-.09l-.8-.24l-.8-.41c-.16-.08-.7-.53-.8-.66l-.56-.7l-.41-.8l-.24-.8l-.09-.9l.09-.9l.24-.8l.41-.8l.66-.8l.7-.56l.8-.41z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGDCUexbkg)%22%20d%3D%22M11.2%208.08c-.74.15-1.46.53-2%201.06c-2.8%202.81-.29%207.54%203.6%206.78c.74-.15%201.46-.53%202-1.07c2.8-2.8.29-7.53-3.6-6.77m.19%202.02c2.78-.67%203.45%203.05%201.41%203.73c-2.97.99-3.74-3.16-1.41-3.73%22%20class%3D%22wm-a%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.7%22%20d%3D%22m10.2%202.3l-.34%202c-.03.16-.21.35-.36.42l-1%20.41c-.28.11-.77-.32-.9-.4l-.02.07l.92.65c.14.1.35.11.5.05l.93-.4c.9-.38.02-2.7%201.17-2.7h2.56l.11-.1c-.15-.1-.06-.3-.47-.3h-2.6c-.16%200-.47.09-.5.3m-6%204.62l.09-.02c-.05-.24-.12-.41.07-.6L6.3%204.36c.33-.33.72.02%201%20.22l.02-.08l-.82-.59c-.25-.19-.52-.04-.7.14L3.89%206c-.06.07-.08.32-.04.4zm.6.67l-.09.01c.1.14.53.61.41.9l-.41%201c-.06.15-.25.33-.41.36l-1.9.31c-.9.15-.44%203.27-.3%203.46l.2.17c.1-.18.11-.03.11-.2l-.01-2.5c0-1.15%202.31-.25%202.7-1.17L5.49%209c.06-.15.06-.37-.04-.5z%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%23ffc21a%22%20d%3D%22M18.4%203.68q.89-.82%201.13.37q1.2-.14.7.96q1.05.59%200%201.18q.5%201.1-.7.96q-.24%201.19-1.13.37q-.89.82-1.13-.37q-1.2.14-.7-.96q-1.05-.59%200-1.18q-.5-1.1.7-.96q.24-1.19%201.13-.37%22%20class%3D%22wm-deco%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGDCUexbkg)%22%20d%3D%22M18.84%204.54q.78-.16.62.62q.67.44%200%20.88q.16.78-.62.62q-.44.67-.88%200q-.78.16-.62-.62q-.67-.44%200-.88q-.16-.78.62-.62q.44-.67.88%200%22%20class%3D%22wm-deco%22%2F%3E%3Cpath%20fill%3D%22%235a1240%22%20d%3D%22M17.87%205.6a.53.53%200%201%200%201.06%200a.53.53%200%201%200-1.06%200%22%20class%3D%22wm-deco%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

给 设置 加一点动效

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

settings 呼吸动效演示

呼吸

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

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

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

旋转

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

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

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

SVG 健康报告

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

文件体积

3.64 KB

3,730 字节

viewBox

0 0 24 24

矢量坐标系

图元总数

7

<path> ×7

风格

多色填充

填充跟随容器颜色

同时含 width/height 与 viewBox:可以只保留 viewBox,让图标跟随容器自适应缩放。 文件体积 3.64 KB(3,730 字节),图元 7 个,风格为多色填充。

常见问题

关于 设置 图标的下载、商用与改色。

设置 图标是什么?▾

它是 with icons Rangoli(withicons-rangoli)开源图标集中的 settings 图标,多色填充,viewBox 为 0 0 24 24,文件仅 3.64 KB,矢量格式可无损缩放到任意尺寸。

如何下载 设置 图标?▾

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

设置 图标可以商用吗?▾

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

如何修改 设置 图标的颜色?▾

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

with icons Rangoli 中的相近图标

settings-2