A traffic light, for status, go and stop states and anything at a junction. On a 24×24 grid in stroke, duotone and fill, free under MIT.
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M10 2L14 2C15.6569 2 17 3.3431 17 5L17 14C17 15.6569 15.6569 17 14 17L10 17C8.3431 17 7 15.6569 7 14L7 5C7 3.3431 8.3431 2 10 2ZM7 5L5 5M17 5L19 5M7 10L5 10M17 10L19 10M12 17L12 22"/>
<path d="M13.5 7C13.5 7.8284 12.8284 8.5 12 8.5C11.1716 8.5 10.5 7.8284 10.5 7C10.5 6.1716 11.1716 5.5 12 5.5C12.8284 5.5 13.5 6.1716 13.5 7ZM13.5 12C13.5 12.8284 12.8284 13.5 12 13.5C11.1716 13.5 10.5 12.8284 10.5 12C10.5 11.1716 11.1716 10.5 12 10.5C12.8284 10.5 13.5 11.1716 13.5 12Z" fill="currentColor" stroke="none"/>
</svg>Also called
What someone searching for this drawing would have typed instead. These are the words the browser's search matches on.
- traffic
- stoplight
- signal
- lights
- stop
- go
- red amber green
- status
Related icons
The rest of the traffic family first, then the Maps shelf.
FAQ
Answered from traffic-light's own facts: its shelf, the weights it was drawn in, its siblings and its dates.
- What is the traffic-light icon for?
- A traffic light, for status, go and stop states and anything at a junction. It is filed under Maps in Keyline Icons, drawn on the same 24×24 grid as the rest of the set. People look for it as traffic, stoplight, signal, lights, stop, go, red amber green and status, and the browser's search matches all of those.
- What styles does the traffic-light icon come in?
- All three: stroke, duotone and fill. They are drawn from the same geometry, so swapping weight never moves anything.
- Is there a square or circle version of traffic-light?
- No. traffic-light is drawn as a bare glyph, and the set has no boxed variant of it.
- What other icons go with traffic-light?
- building, compass, flag, map, map-pin and map-pin-check, and 7 more, all shown below. They are the Maps shelf: nothing else in the set is named after traffic.
- How do I import traffic-light in React?
- <TrafficLight /> is the component, and the weight decides the module: stroke from "@keyline-icons/react", duotone from "@keyline-icons/react/duotone" and fill from "@keyline-icons/react/fill". It takes the usual SVG props plus a size, so <TrafficLight size={16} /> and className="size-4" both work, and there is no provider or theme to set up.
- Where is the traffic-light SVG?
- icons/stroke/traffic-light.svg, icons/duotone/traffic-light.svg and icons/fill/traffic-light.svg in the repository, normalised: no wrapper, no ids and no classes to strip out. The tabs above hand you the same drawing as SVG or JSX without the download, and neither needs an install.
- When was traffic-light added to the set?
- Added 4 Sept 2026, and last redrawn 4 Sept 2026. It ships in v0.4.0, so an install at that version or later has it.
Questions about the set rather than about this drawing are answered where they belong. The home page covers what the set is, how the three styles differ, why some icons come boxed and where the Figma file is; installing the set in a shadcn/ui project covers the React package, the CLI and using an icon without React. The MIT licence is stated in the footer of every page.