stoplight logo

stoplight from SVG Logos by Gil Barbara · Color · CC0-1.0 Free for personal and commercial use.

Name
stoplight
Set
SVG Logos
Style
Color
Viewbox
256×256
License
CC0

Use the stoplight logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" 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>

React

import type { SVGProps } from "react";

export function LogosStoplight(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" 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>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" 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>
</template>

CSS

.icon-stoplight {
  width: 24px;
  height: 24px;
  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%20256%20256%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M250.422%20128c0%2067.612-54.81%20122.422-122.422%20122.422S5.578%20195.612%205.578%20128S60.388%205.578%20128%205.578S250.422%2060.388%20250.422%20128%22%2F%3E%3Cpath%20fill%3D%22%233880f0%22%20d%3D%22M127.755%2053.54a4.533%204.533%200%200%201%204.528%204.528a4.533%204.533%200%200%201-4.528%204.528a4.533%204.533%200%200%201-4.528-4.528a4.533%204.533%200%200%201%204.528-4.528m49.87%2020.585h-44.67v-4.873c4.212-1.966%207.138-6.238%207.138-11.184c0-6.803-5.535-12.337-12.338-12.337s-12.338%205.534-12.338%2012.337c0%204.923%202.9%209.181%207.08%2011.158v4.9H77.78a4.46%204.46%200%200%200-4.462%204.461v67.773a4.463%204.463%200%200%200%204.462%204.463h80.323v39.324H97.117V179.27a4.462%204.462%200%201%200-8.924%200v15.34a4.46%204.46%200%200%200%204.462%204.462h16.455v5.857c0%20.614.502%201.116%201.116%201.116h11.435c.613%200%201.115-.502%201.115-1.116v-5.857h9.866v5.857c0%20.614.502%201.116%201.116%201.116h11.435c.613%200%201.115-.502%201.115-1.116v-5.857h16.258a4.46%204.46%200%200%200%204.462-4.462v-48.25a4.46%204.46%200%200%200-4.462-4.462H82.243V83.05h90.92v43.973a4.463%204.463%200%201%200%208.926%200V78.587a4.463%204.463%200%200%200-4.463-4.462m-76.158%2027.504c-.614%200-1.116.502-1.116%201.116v9.159c0%20.614.502%201.116%201.116%201.116h15.568c.613%200%201.115-.502%201.115-1.116v-9.16c0-.613-.502-1.115-1.115-1.115zm36.905%200c-.614%200-1.116.502-1.116%201.116v9.159c0%20.614.502%201.116%201.116%201.116h15.568c.613%200%201.115-.502%201.115-1.116v-9.16c0-.613-.502-1.115-1.115-1.115z%22%2F%3E%3Cpath%20fill%3D%22%233880f0%22%20d%3D%22M128%2011.156C63.572%2011.156%2011.156%2063.572%2011.156%20128S63.572%20244.844%20128%20244.844S244.844%20192.428%20244.844%20128S192.428%2011.156%20128%2011.156M128%20256c-34.19%200-66.334-13.314-90.51-37.49S0%20162.19%200%20128s13.314-66.334%2037.49-90.51S93.81%200%20128%200s66.334%2013.314%2090.51%2037.49S256%2093.81%20256%20128s-13.314%2066.334-37.49%2090.51S162.19%20256%20128%20256%22%2F%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%20256%20256%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M250.422%20128c0%2067.612-54.81%20122.422-122.422%20122.422S5.578%20195.612%205.578%20128S60.388%205.578%20128%205.578S250.422%2060.388%20250.422%20128%22%2F%3E%3Cpath%20fill%3D%22%233880f0%22%20d%3D%22M127.755%2053.54a4.533%204.533%200%200%201%204.528%204.528a4.533%204.533%200%200%201-4.528%204.528a4.533%204.533%200%200%201-4.528-4.528a4.533%204.533%200%200%201%204.528-4.528m49.87%2020.585h-44.67v-4.873c4.212-1.966%207.138-6.238%207.138-11.184c0-6.803-5.535-12.337-12.338-12.337s-12.338%205.534-12.338%2012.337c0%204.923%202.9%209.181%207.08%2011.158v4.9H77.78a4.46%204.46%200%200%200-4.462%204.461v67.773a4.463%204.463%200%200%200%204.462%204.463h80.323v39.324H97.117V179.27a4.462%204.462%200%201%200-8.924%200v15.34a4.46%204.46%200%200%200%204.462%204.462h16.455v5.857c0%20.614.502%201.116%201.116%201.116h11.435c.613%200%201.115-.502%201.115-1.116v-5.857h9.866v5.857c0%20.614.502%201.116%201.116%201.116h11.435c.613%200%201.115-.502%201.115-1.116v-5.857h16.258a4.46%204.46%200%200%200%204.462-4.462v-48.25a4.46%204.46%200%200%200-4.462-4.462H82.243V83.05h90.92v43.973a4.463%204.463%200%201%200%208.926%200V78.587a4.463%204.463%200%200%200-4.463-4.462m-76.158%2027.504c-.614%200-1.116.502-1.116%201.116v9.159c0%20.614.502%201.116%201.116%201.116h15.568c.613%200%201.115-.502%201.115-1.116v-9.16c0-.613-.502-1.115-1.115-1.115zm36.905%200c-.614%200-1.116.502-1.116%201.116v9.159c0%20.614.502%201.116%201.116%201.116h15.568c.613%200%201.115-.502%201.115-1.116v-9.16c0-.613-.502-1.115-1.115-1.115z%22%2F%3E%3Cpath%20fill%3D%22%233880f0%22%20d%3D%22M128%2011.156C63.572%2011.156%2011.156%2063.572%2011.156%20128S63.572%20244.844%20128%20244.844S244.844%20192.428%20244.844%20128S192.428%2011.156%20128%2011.156M128%20256c-34.19%200-66.334-13.314-90.51-37.49S0%20162.19%200%20128s13.314-66.334%2037.49-90.51S93.81%200%20128%200s66.334%2013.314%2090.51%2037.49S256%2093.81%20256%20128s-13.314%2066.334-37.49%2090.51S162.19%20256%20128%20256%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/logos/stoplight.svg?color=%231a73e8&size=48