Add icons to this collection by clicking the heart icon.
Traffic Light icon - also known as signaling, traffic light, road sign, and stop light. Created in a clean outline color style with a gray and orange finish, perfect for web, apps, and UI projects. Available in SVG and PNG, with multiple style variants.
<svg
xmlns="http://www.w3.org/2000/svg"
width="512"
height="512"
viewBox="0 0 128 128"
>
<linearGradient
id="a"
x1="64"
x2="64"
y1="127"
y2="1"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#949aaf" />
<stop offset="1" stop-color="#c6ccda" />
</linearGradient>
<linearGradient
id="b"
x1="64"
x2="64"
y1="37"
y2="9"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#da5466" />
<stop offset="1" stop-color="#e87092" />
</linearGradient>
<linearGradient id="c" x1="96" x2="96" y1="39.52" y2="7" href="#a" />
<linearGradient id="d" x1="32" x2="32" y1="39.52" y2="7" href="#a" />
<linearGradient
id="e"
x1="64"
x2="64"
y1="78"
y2="50"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#fbcc88" />
<stop offset="1" stop-color="#ffe5c3" />
</linearGradient>
<linearGradient id="f" x1="96" x2="96" y1="80.52" y2="48" href="#a" />
<linearGradient id="g" x1="32" x2="32" y1="80.52" y2="48" href="#a" />
<linearGradient
id="h"
x1="64"
x2="64"
y1="119"
y2="91"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#6ab891" />
<stop offset="1" stop-color="#85cba9" />
</linearGradient>
<linearGradient id="i" x1="96" x2="96" y1="120.52" y2="88" href="#a" />
<linearGradient id="j" x1="32" x2="32" y1="120.52" y2="88" href="#a" />
<g>
<path fill="url(#a)" d="M40 1h48v126H40z" />
<path fill="#949aaf" d="M40 123h48v4H40z" />
<circle cx="64" cy="23" r="14" fill="url(#b)" />
<path
fill="#dd4e6a"
d="M64 37a14 14 0 0 1-13.92-15.5 14 14 0 0 0 27.84 0A14 14 0 0 1 64 37z"
/>
<path
fill="url(#c)"
d="M88 7h16l-1.53 3.11A42.58 42.58 0 0 0 98 29.35a10.09 10.09 0 0 1-10 10.17z"
/>
<path
fill="url(#d)"
d="M40 7H24l1.53 3.11A42.58 42.58 0 0 1 30 29.35a10.09 10.09 0 0 0 10 10.17z"
/>
<circle cx="64" cy="64" r="14" fill="url(#e)" />
<path
fill="#f6b756"
d="M64 78a14 14 0 0 1-13.92-15.5 14 14 0 0 0 27.84 0A14 14 0 0 1 64 78z"
/>
<path
fill="url(#f)"
d="M88 48h16l-1.53 3.11A42.58 42.58 0 0 0 98 70.35a10.09 10.09 0 0 1-10 10.17z"
/>
<path
fill="url(#g)"
d="M40 48H24l1.53 3.11A42.58 42.58 0 0 1 30 70.35a10.09 10.09 0 0 0 10 10.17z"
/>
<circle cx="64" cy="105" r="14" fill="url(#h)" />
<path
fill="#4da67f"
d="M64 119a14 14 0 0 1-13.92-15.5 14 14 0 0 0 27.84 0A14 14 0 0 1 64 119z"
/>
<path
fill="url(#i)"
d="M88 88h16l-1.53 3.11A42.58 42.58 0 0 0 98 110.35a10.09 10.09 0 0 1-10 10.17z"
/>
<path
fill="#8288a1"
d="M98 28.76v.59a10.09 10.09 0 0 1-10 10.17v-4a10.6 10.6 0 0 0 10-6.76zM98 69.76v.59a10.09 10.09 0 0 1-10 10.17v-4a10.6 10.6 0 0 0 10-6.76zM98 109.76v.59a10.09 10.09 0 0 1-10 10.17v-4a10.6 10.6 0 0 0 10-6.76z"
/>
<path
fill="url(#j)"
d="M40 88H24l1.53 3.11A42.58 42.58 0 0 1 30 110.35a10.09 10.09 0 0 0 10 10.17z"
/>
<path
fill="#8288a1"
d="M40 35.52v4a10.09 10.09 0 0 1-10-10.17v-.56a10.63 10.63 0 0 0 10 6.73zM40 76.52v4a10.09 10.09 0 0 1-10-10.17v-.56a10.63 10.63 0 0 0 10 6.73zM40 116.52v4a10.09 10.09 0 0 1-10-10.17v-.56a10.63 10.63 0 0 0 10 6.73z"
/>
<g fill="#47566a">
<path
d="M64 8a15 15 0 1 0 15 15A15 15 0 0 0 64 8zm0 28a13 13 0 1 1 13-13 13 13 0 0 1-13 13zM64 49a15 15 0 1 0 15 15 15 15 0 0 0-15-15zm0 28a13 13 0 1 1 13-13 13 13 0 0 1-13 13z"
/>
<path
d="M99 70.35c0-9.14 2.55-15.11 5.9-21.91A1 1 0 0 0 104 47H89v-6.53a11.12 11.12 0 0 0 10-11.12c0-14.84 6.82-21.35 5.85-22.88-.42-.66.31-.47-15.85-.47V1a1 1 0 0 0-1-1H40a1 1 0 0 0-1 1v5H24a1 1 0 0 0-.9 1.44c3.07 6.23 5.9 12.29 5.9 21.91a11.12 11.12 0 0 0 10 11.12V47c-16.14 0-15.43-.2-15.85.47C22.21 49 29 55.76 29 70.35a11.12 11.12 0 0 0 10 11.12V87H24a1 1 0 0 0-.9 1.44c3.07 6.23 5.9 12.29 5.9 21.91a11.12 11.12 0 0 0 10 11.12V127a1 1 0 0 0 1 1h48a1 1 0 0 0 1-1v-5.53a11.12 11.12 0 0 0 10-11.12c0-14.84 6.82-21.33 5.85-22.88-.42-.66.31-.47-15.85-.47v-5.53a11.12 11.12 0 0 0 10-11.12zM102.39 49C99.2 55.5 97 61.79 97 70.35a9.12 9.12 0 0 1-8 9.11V49zm0-41C99.2 14.5 97 20.79 97 29.35a9.12 9.12 0 0 1-8 9.11V8zM31 29.35c0-8.43-2.12-14.71-5.39-21.35H39v30.46a9.12 9.12 0 0 1-8-9.11zm0 41c0-8.43-2.12-14.71-5.39-21.35H39v30.46a9.12 9.12 0 0 1-8-9.11zm0 40c0-8.43-2.12-14.71-5.39-21.35H39v30.46a9.12 9.12 0 0 1-8-9.11zM87 126H41V2h46zm15.39-37C99.2 95.5 97 101.79 97 110.35a9.12 9.12 0 0 1-8 9.11V89z"
/>
<path
d="M64 90a15 15 0 1 0 15 15 15 15 0 0 0-15-15zm0 28a13 13 0 1 1 13-13 13 13 0 0 1-13 13z"
/>
</g>
</g>
</svg>
More icons in the same style and category