找找图标
traffic-light 图标

traffic-light SVG 图标

streamline-plumptraffic-light

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

图标 ID
streamline-plump:traffic-light
中文名
—
所属集合
Plump free icons
集合规模
1,499 枚
基础网格
24px
色彩
单色（可改色）
开源协议
CC-BY-4.0
作者
Streamline

下载 traffic-light 图标

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

px
iOS / Android 全套尺寸 · 素材包生成器用 AI 生成类似风格的图标

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

traffic-light 的预览与使用场景

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

预览颜色
traffic-light 图标 浅色背景预览浅色背景
traffic-light 图标 深色背景预览深色背景
traffic-light 图标 灰底融入预览灰底融入

在真实界面里长这样

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

各尺寸下的可读性

traffic-light 图标 24px 渲染24pxtraffic-light 图标 32px 渲染32pxtraffic-light 图标 48px 渲染48pxtraffic-light 图标 64px 渲染64pxtraffic-light 图标 96px 渲染96pxtraffic-light 图标 128px 渲染128px

复制 traffic-light 图标代码

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

svgSVG 源码（内联 HTML）
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"><path d="M35.683 8.059c-.117-2.455-1.821-4.457-4.265-4.713C29.613 3.156 27.164 3 24 3s-5.613.156-7.418.346c-2.444.256-4.148 2.258-4.265 4.713C12.165 11.273 12 16.483 12 24s.165 12.727.317 15.941c.117 2.455 1.821 4.457 4.265 4.713c1.805.19 4.254.346 7.418.346s5.613-.156 7.418-.346c2.444-.256 4.148-2.258 4.265-4.713C35.835 36.727 36 31.517 36 24s-.165-12.727-.317-15.941"/><path d="M12.088 33h-.218c-1.282 0-2.515.029-3.517.063c-1.323.044-2.365 1.149-2.063 2.437c.295 1.266.763 2.403 1.138 3.195a2.17 2.17 0 0 0 1.88 1.253c.585.029 1.412.052 2.562.052l.45-.001l-.003-.058M12.016 20h-.146c-1.282 0-2.515.029-3.517.063c-1.323.044-2.365 1.149-2.063 2.437c.295 1.266.763 2.403 1.138 3.195a2.17 2.17 0 0 0 1.88 1.253c.585.029 1.412.052 2.562.052h.139m.461-19.998L11.87 7c-1.282 0-2.515.029-3.517.063C7.03 7.107 5.988 8.212 6.29 9.5c.295 1.266.763 2.403 1.138 3.195a2.17 2.17 0 0 0 1.88 1.253A52 52 0 0 0 12.11 14m23.801 19h.218c1.283 0 2.516.029 3.518.063c1.322.044 2.364 1.149 2.063 2.437a16.3 16.3 0 0 1-1.139 3.195a2.17 2.17 0 0 1-1.879 1.253c-.585.029-1.412.052-2.563.052l-.45-.001l.004-.058M35.99 27h.14c1.15 0 1.977-.023 2.562-.052a2.17 2.17 0 0 0 1.88-1.253c.374-.792.842-1.929 1.138-3.195c.3-1.288-.74-2.393-2.063-2.437A106 106 0 0 0 36.129 20h-.146M35.53 7.002l.6-.002c1.282 0 2.515.029 3.517.063c1.323.044 2.364 1.149 2.063 2.437a16.3 16.3 0 0 1-1.139 3.195a2.17 2.17 0 0 1-1.879 1.253A52 52 0 0 1 35.89 14M27 37a3 3 0 1 1-6 0a3 3 0 1 1 6 0m0-13a3 3 0 1 1-6 0a3 3 0 1 1 6 0m0-13a3 3 0 1 1-6 0a3 3 0 1 1 6 0"/></g></svg>
reactReact 组件（TSX）
export function TrafficLightIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      viewBox="0 0 48 48"
      fill="currentColor"
      {...props}
      dangerouslySetInnerHTML={{ __html: `<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"><path d="M35.683 8.059c-.117-2.455-1.821-4.457-4.265-4.713C29.613 3.156 27.164 3 24 3s-5.613.156-7.418.346c-2.444.256-4.148 2.258-4.265 4.713C12.165 11.273 12 16.483 12 24s.165 12.727.317 15.941c.117 2.455 1.821 4.457 4.265 4.713c1.805.19 4.254.346 7.418.346s5.613-.156 7.418-.346c2.444-.256 4.148-2.258 4.265-4.713C35.835 36.727 36 31.517 36 24s-.165-12.727-.317-15.941"/><path d="M12.088 33h-.218c-1.282 0-2.515.029-3.517.063c-1.323.044-2.365 1.149-2.063 2.437c.295 1.266.763 2.403 1.138 3.195a2.17 2.17 0 0 0 1.88 1.253c.585.029 1.412.052 2.562.052l.45-.001l-.003-.058M12.016 20h-.146c-1.282 0-2.515.029-3.517.063c-1.323.044-2.365 1.149-2.063 2.437c.295 1.266.763 2.403 1.138 3.195a2.17 2.17 0 0 0 1.88 1.253c.585.029 1.412.052 2.562.052h.139m.461-19.998L11.87 7c-1.282 0-2.515.029-3.517.063C7.03 7.107 5.988 8.212 6.29 9.5c.295 1.266.763 2.403 1.138 3.195a2.17 2.17 0 0 0 1.88 1.253A52 52 0 0 0 12.11 14m23.801 19h.218c1.283 0 2.516.029 3.518.063c1.322.044 2.364 1.149 2.063 2.437a16.3 16.3 0 0 1-1.139 3.195a2.17 2.17 0 0 1-1.879 1.253c-.585.029-1.412.052-2.563.052l-.45-.001l.004-.058M35.99 27h.14c1.15 0 1.977-.023 2.562-.052a2.17 2.17 0 0 0 1.88-1.253c.374-.792.842-1.929 1.138-3.195c.3-1.288-.74-2.393-2.063-2.437A106 106 0 0 0 36.129 20h-.146M35.53 7.002l.6-.002c1.282 0 2.515.029 3.517.063c1.323.044 2.364 1.149 2.063 2.437a16.3 16.3 0 0 1-1.139 3.195a2.17 2.17 0 0 1-1.879 1.253A52 52 0 0 1 35.89 14M27 37a3 3 0 1 1-6 0a3 3 0 1 1 6 0m0-13a3 3 0 1 1-6 0a3 3 0 1 1 6 0m0-13a3 3 0 1 1-6 0a3 3 0 1 1 6 0"/></g>` }}
    />
  );
}
vueVue 3 组件
<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48" fill="currentColor" v-html="body"></svg>
</template>

<script setup>
const body = `<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"><path d="M35.683 8.059c-.117-2.455-1.821-4.457-4.265-4.713C29.613 3.156 27.164 3 24 3s-5.613.156-7.418.346c-2.444.256-4.148 2.258-4.265 4.713C12.165 11.273 12 16.483 12 24s.165 12.727.317 15.941c.117 2.455 1.821 4.457 4.265 4.713c1.805.19 4.254.346 7.418.346s5.613-.156 7.418-.346c2.444-.256 4.148-2.258 4.265-4.713C35.835 36.727 36 31.517 36 24s-.165-12.727-.317-15.941"/><path d="M12.088 33h-.218c-1.282 0-2.515.029-3.517.063c-1.323.044-2.365 1.149-2.063 2.437c.295 1.266.763 2.403 1.138 3.195a2.17 2.17 0 0 0 1.88 1.253c.585.029 1.412.052 2.562.052l.45-.001l-.003-.058M12.016 20h-.146c-1.282 0-2.515.029-3.517.063c-1.323.044-2.365 1.149-2.063 2.437c.295 1.266.763 2.403 1.138 3.195a2.17 2.17 0 0 0 1.88 1.253c.585.029 1.412.052 2.562.052h.139m.461-19.998L11.87 7c-1.282 0-2.515.029-3.517.063C7.03 7.107 5.988 8.212 6.29 9.5c.295 1.266.763 2.403 1.138 3.195a2.17 2.17 0 0 0 1.88 1.253A52 52 0 0 0 12.11 14m23.801 19h.218c1.283 0 2.516.029 3.518.063c1.322.044 2.364 1.149 2.063 2.437a16.3 16.3 0 0 1-1.139 3.195a2.17 2.17 0 0 1-1.879 1.253c-.585.029-1.412.052-2.563.052l-.45-.001l.004-.058M35.99 27h.14c1.15 0 1.977-.023 2.562-.052a2.17 2.17 0 0 0 1.88-1.253c.374-.792.842-1.929 1.138-3.195c.3-1.288-.74-2.393-2.063-2.437A106 106 0 0 0 36.129 20h-.146M35.53 7.002l.6-.002c1.282 0 2.515.029 3.517.063c1.323.044 2.364 1.149 2.063 2.437a16.3 16.3 0 0 1-1.139 3.195a2.17 2.17 0 0 1-1.879 1.253A52 52 0 0 1 35.89 14M27 37a3 3 0 1 1-6 0a3 3 0 1 1 6 0m0-13a3 3 0 1 1-6 0a3 3 0 1 1 6 0m0-13a3 3 0 1 1-6 0a3 3 0 1 1 6 0"/></g>`;
</script>
cssCSS mask（随 currentColor 改色）
.traffic-light {
  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%2048%2048%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%223%22%3E%3Cpath%20d%3D%22M35.683%208.059c-.117-2.455-1.821-4.457-4.265-4.713C29.613%203.156%2027.164%203%2024%203s-5.613.156-7.418.346c-2.444.256-4.148%202.258-4.265%204.713C12.165%2011.273%2012%2016.483%2012%2024s.165%2012.727.317%2015.941c.117%202.455%201.821%204.457%204.265%204.713c1.805.19%204.254.346%207.418.346s5.613-.156%207.418-.346c2.444-.256%204.148-2.258%204.265-4.713C35.835%2036.727%2036%2031.517%2036%2024s-.165-12.727-.317-15.941%22%2F%3E%3Cpath%20d%3D%22M12.088%2033h-.218c-1.282%200-2.515.029-3.517.063c-1.323.044-2.365%201.149-2.063%202.437c.295%201.266.763%202.403%201.138%203.195a2.17%202.17%200%200%200%201.88%201.253c.585.029%201.412.052%202.562.052l.45-.001l-.003-.058M12.016%2020h-.146c-1.282%200-2.515.029-3.517.063c-1.323.044-2.365%201.149-2.063%202.437c.295%201.266.763%202.403%201.138%203.195a2.17%202.17%200%200%200%201.88%201.253c.585.029%201.412.052%202.562.052h.139m.461-19.998L11.87%207c-1.282%200-2.515.029-3.517.063C7.03%207.107%205.988%208.212%206.29%209.5c.295%201.266.763%202.403%201.138%203.195a2.17%202.17%200%200%200%201.88%201.253A52%2052%200%200%200%2012.11%2014m23.801%2019h.218c1.283%200%202.516.029%203.518.063c1.322.044%202.364%201.149%202.063%202.437a16.3%2016.3%200%200%201-1.139%203.195a2.17%202.17%200%200%201-1.879%201.253c-.585.029-1.412.052-2.563.052l-.45-.001l.004-.058M35.99%2027h.14c1.15%200%201.977-.023%202.562-.052a2.17%202.17%200%200%200%201.88-1.253c.374-.792.842-1.929%201.138-3.195c.3-1.288-.74-2.393-2.063-2.437A106%20106%200%200%200%2036.129%2020h-.146M35.53%207.002l.6-.002c1.282%200%202.515.029%203.517.063c1.323.044%202.364%201.149%202.063%202.437a16.3%2016.3%200%200%201-1.139%203.195a2.17%202.17%200%200%201-1.879%201.253A52%2052%200%200%201%2035.89%2014M27%2037a3%203%200%201%201-6%200a3%203%200%201%201%206%200m0-13a3%203%200%201%201-6%200a3%203%200%201%201%206%200m0-13a3%203%200%201%201-6%200a3%203%200%201%201%206%200%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%2048%2048%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%223%22%3E%3Cpath%20d%3D%22M35.683%208.059c-.117-2.455-1.821-4.457-4.265-4.713C29.613%203.156%2027.164%203%2024%203s-5.613.156-7.418.346c-2.444.256-4.148%202.258-4.265%204.713C12.165%2011.273%2012%2016.483%2012%2024s.165%2012.727.317%2015.941c.117%202.455%201.821%204.457%204.265%204.713c1.805.19%204.254.346%207.418.346s5.613-.156%207.418-.346c2.444-.256%204.148-2.258%204.265-4.713C35.835%2036.727%2036%2031.517%2036%2024s-.165-12.727-.317-15.941%22%2F%3E%3Cpath%20d%3D%22M12.088%2033h-.218c-1.282%200-2.515.029-3.517.063c-1.323.044-2.365%201.149-2.063%202.437c.295%201.266.763%202.403%201.138%203.195a2.17%202.17%200%200%200%201.88%201.253c.585.029%201.412.052%202.562.052l.45-.001l-.003-.058M12.016%2020h-.146c-1.282%200-2.515.029-3.517.063c-1.323.044-2.365%201.149-2.063%202.437c.295%201.266.763%202.403%201.138%203.195a2.17%202.17%200%200%200%201.88%201.253c.585.029%201.412.052%202.562.052h.139m.461-19.998L11.87%207c-1.282%200-2.515.029-3.517.063C7.03%207.107%205.988%208.212%206.29%209.5c.295%201.266.763%202.403%201.138%203.195a2.17%202.17%200%200%200%201.88%201.253A52%2052%200%200%200%2012.11%2014m23.801%2019h.218c1.283%200%202.516.029%203.518.063c1.322.044%202.364%201.149%202.063%202.437a16.3%2016.3%200%200%201-1.139%203.195a2.17%202.17%200%200%201-1.879%201.253c-.585.029-1.412.052-2.563.052l-.45-.001l.004-.058M35.99%2027h.14c1.15%200%201.977-.023%202.562-.052a2.17%202.17%200%200%200%201.88-1.253c.374-.792.842-1.929%201.138-3.195c.3-1.288-.74-2.393-2.063-2.437A106%20106%200%200%200%2036.129%2020h-.146M35.53%207.002l.6-.002c1.282%200%202.515.029%203.517.063c1.323.044%202.364%201.149%202.063%202.437a16.3%2016.3%200%200%201-1.139%203.195a2.17%202.17%200%200%201-1.879%201.253A52%2052%200%200%201%2035.89%2014M27%2037a3%203%200%201%201-6%200a3%203%200%201%201%206%200m0-13a3%203%200%201%201-6%200a3%203%200%201%201%206%200m0-13a3%203%200%201%201-6%200a3%203%200%201%201%206%200%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

给 traffic-light 加一点动效

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

traffic-light 呼吸动效演示

呼吸

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

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

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

旋转

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

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

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

描画

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

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

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

SVG 健康报告

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

文件体积

1.67 KB

1,710 字节

viewBox

0 0 48 48

矢量坐标系

图元总数

2

<path> ×2

风格

单色轮廓（描边）

描边可随字号加粗

同时含 width/height 与 viewBox：可以只保留 viewBox，让图标跟随容器自适应缩放。 文件体积 1.67 KB（1,710 字节），图元 2 个，风格为单色轮廓（描边）。

常见问题

关于 traffic-light 图标的下载、商用与改色。

traffic-light 图标是什么？▾

它是 Plump free icons（streamline-plump）开源图标集中的 traffic-light 图标，单色轮廓（描边），viewBox 为 0 0 48 48，文件仅 1.67 KB，矢量格式可无损缩放到任意尺寸。

如何下载 traffic-light 图标？▾

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

traffic-light 图标可以商用吗？▾

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

如何修改 traffic-light 图标的颜色？▾

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

Plump free icons 中的相近图标

traffic-light-remix
traffic-light-solid