Stoplight icon
logos:stoplight
The Stoplight icon (logos:stoplight) is a free SVG icon from the SVG Logos set by Gil Barbara. It is drawn on a 256 × 256 grid. SVG Logos icons are released under the CC0 license, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.
- Icon set
- SVG Logos
- Author
- Gil Barbara
- License
- CC0-1.0
- Size
- 256 × 256
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"><path fill="#fff" d="M250.422 128c0 67.612-54.81 122.422-122.422 122.422S5.578 195.612 5.578 128S60.388 5.578 128 5.578S250.422 60.388 250.422 128"/><path fill="#3880f0" d="M127.755 53.54a4.533 4.533 0 0 1 4.528 4.528a4.533 4.533 0 0 1-4.528 4.528a4.533 4.533 0 0 1-4.528-4.528a4.533 4.533 0 0 1 4.528-4.528m49.87 20.585h-44.67v-4.873c4.212-1.966 7.138-6.238 7.138-11.184c0-6.803-5.535-12.337-12.338-12.337s-12.338 5.534-12.338 12.337c0 4.923 2.9 9.181 7.08 11.158v4.9H77.78a4.46 4.46 0 0 0-4.462 4.461v67.773a4.463 4.463 0 0 0 4.462 4.463h80.323v39.324H97.117V179.27a4.462 4.462 0 1 0-8.924 0v15.34a4.46 4.46 0 0 0 4.462 4.462h16.455v5.857c0 .614.502 1.116 1.116 1.116h11.435c.613 0 1.115-.502 1.115-1.116v-5.857h9.866v5.857c0 .614.502 1.116 1.116 1.116h11.435c.613 0 1.115-.502 1.115-1.116v-5.857h16.258a4.46 4.46 0 0 0 4.462-4.462v-48.25a4.46 4.46 0 0 0-4.462-4.462H82.243V83.05h90.92v43.973a4.463 4.463 0 1 0 8.926 0V78.587a4.463 4.463 0 0 0-4.463-4.462m-76.158 27.504c-.614 0-1.116.502-1.116 1.116v9.159c0 .614.502 1.116 1.116 1.116h15.568c.613 0 1.115-.502 1.115-1.116v-9.16c0-.613-.502-1.115-1.115-1.115zm36.905 0c-.614 0-1.116.502-1.116 1.116v9.159c0 .614.502 1.116 1.116 1.116h15.568c.613 0 1.115-.502 1.115-1.116v-9.16c0-.613-.502-1.115-1.115-1.115z"/><path fill="#3880f0" d="M128 11.156C63.572 11.156 11.156 63.572 11.156 128S63.572 244.844 128 244.844S244.844 192.428 244.844 128S192.428 11.156 128 11.156M128 256c-34.19 0-66.334-13.314-90.51-37.49S0 162.19 0 128s13.314-66.334 37.49-90.51S93.81 0 128 0s66.334 13.314 90.51 37.49S256 93.81 256 128s-13.314 66.334-37.49 90.51S162.19 256 128 256"/></svg>How to use the Stoplight icon
React
import { Icon } from "@iconify/react";
<Icon icon="logos:stoplight" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="logos:stoplight" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="logos:stoplight" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[logos--stoplight]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/logos -->
<div class="i-logos:stoplight"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="logos:stoplight"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/logos/stoplight.svg" alt="Stoplight icon" width="24" height="24">Stoplight icon FAQ
Is the Stoplight icon free for commercial use?
Yes. SVG Logos icons are released under the CC0 license, which allows use in personal and commercial projects.
How do I use the Stoplight icon in React?
Install @iconify/react and render <Icon icon="logos:stoplight" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Stoplight icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/logos/stoplight.svg" alt="Stoplight icon">, or paste the SVG code inline to style it with CSS.