vertical traffic light emoji

vertical-traffic-light from Streamline Emojis by Streamline · Default · Travel Places · CC-BY-4.0 Attribution required.

Name
vertical-traffic-light
Set
Streamline Emojis
Style
Default
Category
Travel Places
Viewbox
48×48
License
CC BY 4.0

The same emoji in other sets

vertical-traffic-lightEmoji One (Colored)vertical-traffic-lightFluent Emojivertical-traffic-lightFluent Emoji Flatvertical-traffic-lightFluent Emoji High Contrastvertical-traffic-lightNoto Emojivertical-traffic-lightOpenMojivertical-traffic-lightTwitter Emoji

More travel places icons from Streamline Emojis

airplaneambulanceanchorautomobilebicyclebullet-trainbuscarousel-horsecastleconstructiondelivery-truckfactoryferris-wheelfire-enginefountainfuel-pumphelicopterhospitalhouse-with-gardenlocomotivelove-hotelminibusoffice-buildingoncoming-police-car

Use the vertical traffic light emoji

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="#45413c" d="M13 46.5a11 1.5 0 1 0 22 0a11 1.5 0 1 0-22 0" opacity=".15"/><path fill="#daedf7" d="M24 45.5A10.47 10.47 0 0 1 13.53 35V11A10.47 10.47 0 0 1 24 .5A10.47 10.47 0 0 1 34.47 11v24A10.47 10.47 0 0 1 24 45.5"/><path fill="#fff" d="M24 .5A10.47 10.47 0 0 0 13.53 11v2.61a10.47 10.47 0 0 1 20.94 0V11A10.47 10.47 0 0 0 24 .5"/><path fill="none" stroke="#45413c" stroke-linecap="round" stroke-linejoin="round" d="M24 45.5A10.47 10.47 0 0 1 13.53 35V11A10.47 10.47 0 0 1 24 .5h0A10.47 10.47 0 0 1 34.47 11v24A10.47 10.47 0 0 1 24 45.5"/><path fill="#87898c" d="M24 42.88A7.85 7.85 0 0 1 16.15 35V11A7.85 7.85 0 0 1 24 3.12A7.85 7.85 0 0 1 31.85 11v24A7.85 7.85 0 0 1 24 42.88"/><path fill="#656769" d="M24 3.12A7.85 7.85 0 0 0 16.15 11v2.75a7.85 7.85 0 0 1 15.7 0V11A7.85 7.85 0 0 0 24 3.12"/><path fill="none" stroke="#45413c" stroke-linecap="round" stroke-linejoin="round" d="M24 42.88A7.85 7.85 0 0 1 16.15 35V11A7.85 7.85 0 0 1 24 3.12h0A7.85 7.85 0 0 1 31.85 11v24A7.85 7.85 0 0 1 24 42.88"/><path fill="#ffe500" d="M19.5 23.5a4.5 4.5 0 1 0 9 0a4.5 4.5 0 1 0-9 0"/><path fill="#fff48c" d="M24 19a4.49 4.49 0 0 0-1.92 8.56l5-7.31A4.5 4.5 0 0 0 24 19"/><path fill="#6dd627" d="M19.5 12a4.5 4.5 0 1 0 9 0a4.5 4.5 0 1 0-9 0"/><path fill="#9ceb60" d="M24 7.5a4.49 4.49 0 0 0-1.92 8.56l5-7.31A4.5 4.5 0 0 0 24 7.5"/><path fill="#ff6242" d="M19.5 35a4.5 4.5 0 1 0 9 0a4.5 4.5 0 1 0-9 0"/><path fill="#ff866e" d="M24 30.5a4.49 4.49 0 0 0-1.92 8.56l5-7.31A4.5 4.5 0 0 0 24 30.5"/><path fill="none" stroke="#45413c" stroke-linecap="round" stroke-linejoin="round" d="M19.5 23.5a4.5 4.5 0 1 0 9 0a4.5 4.5 0 1 0-9 0m0-11.5a4.5 4.5 0 1 0 9 0a4.5 4.5 0 1 0-9 0m0 23a4.5 4.5 0 1 0 9 0a4.5 4.5 0 1 0-9 0"/><path fill="#bdbec0" stroke="#45413c" stroke-linecap="round" stroke-linejoin="round" d="M29 34.7c0 2.76-.81-2.5-5-2.5s-5 5.26-5 2.5a5 5 0 0 1 10 0m0-11.5c0 2.76-.81-2.5-5-2.5s-5 5.3-5 2.5a5 5 0 0 1 10 0m0-11.5c0 2.76-.81-2.5-5-2.5s-5 5.26-5 2.5a5 5 0 0 1 10 0"/></svg>

React

import type { SVGProps } from "react";

export function StreamlineEmojisVerticalTrafficLight(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="#45413c" d="M13 46.5a11 1.5 0 1 0 22 0a11 1.5 0 1 0-22 0" opacity=".15"/><path fill="#daedf7" d="M24 45.5A10.47 10.47 0 0 1 13.53 35V11A10.47 10.47 0 0 1 24 .5A10.47 10.47 0 0 1 34.47 11v24A10.47 10.47 0 0 1 24 45.5"/><path fill="#fff" d="M24 .5A10.47 10.47 0 0 0 13.53 11v2.61a10.47 10.47 0 0 1 20.94 0V11A10.47 10.47 0 0 0 24 .5"/><path fill="none" stroke="#45413c" strokeLinecap="round" strokeLinejoin="round" d="M24 45.5A10.47 10.47 0 0 1 13.53 35V11A10.47 10.47 0 0 1 24 .5h0A10.47 10.47 0 0 1 34.47 11v24A10.47 10.47 0 0 1 24 45.5"/><path fill="#87898c" d="M24 42.88A7.85 7.85 0 0 1 16.15 35V11A7.85 7.85 0 0 1 24 3.12A7.85 7.85 0 0 1 31.85 11v24A7.85 7.85 0 0 1 24 42.88"/><path fill="#656769" d="M24 3.12A7.85 7.85 0 0 0 16.15 11v2.75a7.85 7.85 0 0 1 15.7 0V11A7.85 7.85 0 0 0 24 3.12"/><path fill="none" stroke="#45413c" strokeLinecap="round" strokeLinejoin="round" d="M24 42.88A7.85 7.85 0 0 1 16.15 35V11A7.85 7.85 0 0 1 24 3.12h0A7.85 7.85 0 0 1 31.85 11v24A7.85 7.85 0 0 1 24 42.88"/><path fill="#ffe500" d="M19.5 23.5a4.5 4.5 0 1 0 9 0a4.5 4.5 0 1 0-9 0"/><path fill="#fff48c" d="M24 19a4.49 4.49 0 0 0-1.92 8.56l5-7.31A4.5 4.5 0 0 0 24 19"/><path fill="#6dd627" d="M19.5 12a4.5 4.5 0 1 0 9 0a4.5 4.5 0 1 0-9 0"/><path fill="#9ceb60" d="M24 7.5a4.49 4.49 0 0 0-1.92 8.56l5-7.31A4.5 4.5 0 0 0 24 7.5"/><path fill="#ff6242" d="M19.5 35a4.5 4.5 0 1 0 9 0a4.5 4.5 0 1 0-9 0"/><path fill="#ff866e" d="M24 30.5a4.49 4.49 0 0 0-1.92 8.56l5-7.31A4.5 4.5 0 0 0 24 30.5"/><path fill="none" stroke="#45413c" strokeLinecap="round" strokeLinejoin="round" d="M19.5 23.5a4.5 4.5 0 1 0 9 0a4.5 4.5 0 1 0-9 0m0-11.5a4.5 4.5 0 1 0 9 0a4.5 4.5 0 1 0-9 0m0 23a4.5 4.5 0 1 0 9 0a4.5 4.5 0 1 0-9 0"/><path fill="#bdbec0" stroke="#45413c" strokeLinecap="round" strokeLinejoin="round" d="M29 34.7c0 2.76-.81-2.5-5-2.5s-5 5.26-5 2.5a5 5 0 0 1 10 0m0-11.5c0 2.76-.81-2.5-5-2.5s-5 5.3-5 2.5a5 5 0 0 1 10 0m0-11.5c0 2.76-.81-2.5-5-2.5s-5 5.26-5 2.5a5 5 0 0 1 10 0"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="#45413c" d="M13 46.5a11 1.5 0 1 0 22 0a11 1.5 0 1 0-22 0" opacity=".15"/><path fill="#daedf7" d="M24 45.5A10.47 10.47 0 0 1 13.53 35V11A10.47 10.47 0 0 1 24 .5A10.47 10.47 0 0 1 34.47 11v24A10.47 10.47 0 0 1 24 45.5"/><path fill="#fff" d="M24 .5A10.47 10.47 0 0 0 13.53 11v2.61a10.47 10.47 0 0 1 20.94 0V11A10.47 10.47 0 0 0 24 .5"/><path fill="none" stroke="#45413c" stroke-linecap="round" stroke-linejoin="round" d="M24 45.5A10.47 10.47 0 0 1 13.53 35V11A10.47 10.47 0 0 1 24 .5h0A10.47 10.47 0 0 1 34.47 11v24A10.47 10.47 0 0 1 24 45.5"/><path fill="#87898c" d="M24 42.88A7.85 7.85 0 0 1 16.15 35V11A7.85 7.85 0 0 1 24 3.12A7.85 7.85 0 0 1 31.85 11v24A7.85 7.85 0 0 1 24 42.88"/><path fill="#656769" d="M24 3.12A7.85 7.85 0 0 0 16.15 11v2.75a7.85 7.85 0 0 1 15.7 0V11A7.85 7.85 0 0 0 24 3.12"/><path fill="none" stroke="#45413c" stroke-linecap="round" stroke-linejoin="round" d="M24 42.88A7.85 7.85 0 0 1 16.15 35V11A7.85 7.85 0 0 1 24 3.12h0A7.85 7.85 0 0 1 31.85 11v24A7.85 7.85 0 0 1 24 42.88"/><path fill="#ffe500" d="M19.5 23.5a4.5 4.5 0 1 0 9 0a4.5 4.5 0 1 0-9 0"/><path fill="#fff48c" d="M24 19a4.49 4.49 0 0 0-1.92 8.56l5-7.31A4.5 4.5 0 0 0 24 19"/><path fill="#6dd627" d="M19.5 12a4.5 4.5 0 1 0 9 0a4.5 4.5 0 1 0-9 0"/><path fill="#9ceb60" d="M24 7.5a4.49 4.49 0 0 0-1.92 8.56l5-7.31A4.5 4.5 0 0 0 24 7.5"/><path fill="#ff6242" d="M19.5 35a4.5 4.5 0 1 0 9 0a4.5 4.5 0 1 0-9 0"/><path fill="#ff866e" d="M24 30.5a4.49 4.49 0 0 0-1.92 8.56l5-7.31A4.5 4.5 0 0 0 24 30.5"/><path fill="none" stroke="#45413c" stroke-linecap="round" stroke-linejoin="round" d="M19.5 23.5a4.5 4.5 0 1 0 9 0a4.5 4.5 0 1 0-9 0m0-11.5a4.5 4.5 0 1 0 9 0a4.5 4.5 0 1 0-9 0m0 23a4.5 4.5 0 1 0 9 0a4.5 4.5 0 1 0-9 0"/><path fill="#bdbec0" stroke="#45413c" stroke-linecap="round" stroke-linejoin="round" d="M29 34.7c0 2.76-.81-2.5-5-2.5s-5 5.26-5 2.5a5 5 0 0 1 10 0m0-11.5c0 2.76-.81-2.5-5-2.5s-5 5.3-5 2.5a5 5 0 0 1 10 0m0-11.5c0 2.76-.81-2.5-5-2.5s-5 5.26-5 2.5a5 5 0 0 1 10 0"/></svg>
</template>

CSS

.icon-vertical-traffic-light {
  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%2048%2048%22%3E%3Cpath%20fill%3D%22%2345413c%22%20d%3D%22M13%2046.5a11%201.5%200%201%200%2022%200a11%201.5%200%201%200-22%200%22%20opacity%3D%22.15%22%2F%3E%3Cpath%20fill%3D%22%23daedf7%22%20d%3D%22M24%2045.5A10.47%2010.47%200%200%201%2013.53%2035V11A10.47%2010.47%200%200%201%2024%20.5A10.47%2010.47%200%200%201%2034.47%2011v24A10.47%2010.47%200%200%201%2024%2045.5%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M24%20.5A10.47%2010.47%200%200%200%2013.53%2011v2.61a10.47%2010.47%200%200%201%2020.94%200V11A10.47%2010.47%200%200%200%2024%20.5%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%2345413c%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M24%2045.5A10.47%2010.47%200%200%201%2013.53%2035V11A10.47%2010.47%200%200%201%2024%20.5h0A10.47%2010.47%200%200%201%2034.47%2011v24A10.47%2010.47%200%200%201%2024%2045.5%22%2F%3E%3Cpath%20fill%3D%22%2387898c%22%20d%3D%22M24%2042.88A7.85%207.85%200%200%201%2016.15%2035V11A7.85%207.85%200%200%201%2024%203.12A7.85%207.85%200%200%201%2031.85%2011v24A7.85%207.85%200%200%201%2024%2042.88%22%2F%3E%3Cpath%20fill%3D%22%23656769%22%20d%3D%22M24%203.12A7.85%207.85%200%200%200%2016.15%2011v2.75a7.85%207.85%200%200%201%2015.7%200V11A7.85%207.85%200%200%200%2024%203.12%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%2345413c%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M24%2042.88A7.85%207.85%200%200%201%2016.15%2035V11A7.85%207.85%200%200%201%2024%203.12h0A7.85%207.85%200%200%201%2031.85%2011v24A7.85%207.85%200%200%201%2024%2042.88%22%2F%3E%3Cpath%20fill%3D%22%23ffe500%22%20d%3D%22M19.5%2023.5a4.5%204.5%200%201%200%209%200a4.5%204.5%200%201%200-9%200%22%2F%3E%3Cpath%20fill%3D%22%23fff48c%22%20d%3D%22M24%2019a4.49%204.49%200%200%200-1.92%208.56l5-7.31A4.5%204.5%200%200%200%2024%2019%22%2F%3E%3Cpath%20fill%3D%22%236dd627%22%20d%3D%22M19.5%2012a4.5%204.5%200%201%200%209%200a4.5%204.5%200%201%200-9%200%22%2F%3E%3Cpath%20fill%3D%22%239ceb60%22%20d%3D%22M24%207.5a4.49%204.49%200%200%200-1.92%208.56l5-7.31A4.5%204.5%200%200%200%2024%207.5%22%2F%3E%3Cpath%20fill%3D%22%23ff6242%22%20d%3D%22M19.5%2035a4.5%204.5%200%201%200%209%200a4.5%204.5%200%201%200-9%200%22%2F%3E%3Cpath%20fill%3D%22%23ff866e%22%20d%3D%22M24%2030.5a4.49%204.49%200%200%200-1.92%208.56l5-7.31A4.5%204.5%200%200%200%2024%2030.5%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%2345413c%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M19.5%2023.5a4.5%204.5%200%201%200%209%200a4.5%204.5%200%201%200-9%200m0-11.5a4.5%204.5%200%201%200%209%200a4.5%204.5%200%201%200-9%200m0%2023a4.5%204.5%200%201%200%209%200a4.5%204.5%200%201%200-9%200%22%2F%3E%3Cpath%20fill%3D%22%23bdbec0%22%20stroke%3D%22%2345413c%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M29%2034.7c0%202.76-.81-2.5-5-2.5s-5%205.26-5%202.5a5%205%200%200%201%2010%200m0-11.5c0%202.76-.81-2.5-5-2.5s-5%205.3-5%202.5a5%205%200%200%201%2010%200m0-11.5c0%202.76-.81-2.5-5-2.5s-5%205.26-5%202.5a5%205%200%200%201%2010%200%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%2048%2048%22%3E%3Cpath%20fill%3D%22%2345413c%22%20d%3D%22M13%2046.5a11%201.5%200%201%200%2022%200a11%201.5%200%201%200-22%200%22%20opacity%3D%22.15%22%2F%3E%3Cpath%20fill%3D%22%23daedf7%22%20d%3D%22M24%2045.5A10.47%2010.47%200%200%201%2013.53%2035V11A10.47%2010.47%200%200%201%2024%20.5A10.47%2010.47%200%200%201%2034.47%2011v24A10.47%2010.47%200%200%201%2024%2045.5%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M24%20.5A10.47%2010.47%200%200%200%2013.53%2011v2.61a10.47%2010.47%200%200%201%2020.94%200V11A10.47%2010.47%200%200%200%2024%20.5%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%2345413c%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M24%2045.5A10.47%2010.47%200%200%201%2013.53%2035V11A10.47%2010.47%200%200%201%2024%20.5h0A10.47%2010.47%200%200%201%2034.47%2011v24A10.47%2010.47%200%200%201%2024%2045.5%22%2F%3E%3Cpath%20fill%3D%22%2387898c%22%20d%3D%22M24%2042.88A7.85%207.85%200%200%201%2016.15%2035V11A7.85%207.85%200%200%201%2024%203.12A7.85%207.85%200%200%201%2031.85%2011v24A7.85%207.85%200%200%201%2024%2042.88%22%2F%3E%3Cpath%20fill%3D%22%23656769%22%20d%3D%22M24%203.12A7.85%207.85%200%200%200%2016.15%2011v2.75a7.85%207.85%200%200%201%2015.7%200V11A7.85%207.85%200%200%200%2024%203.12%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%2345413c%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M24%2042.88A7.85%207.85%200%200%201%2016.15%2035V11A7.85%207.85%200%200%201%2024%203.12h0A7.85%207.85%200%200%201%2031.85%2011v24A7.85%207.85%200%200%201%2024%2042.88%22%2F%3E%3Cpath%20fill%3D%22%23ffe500%22%20d%3D%22M19.5%2023.5a4.5%204.5%200%201%200%209%200a4.5%204.5%200%201%200-9%200%22%2F%3E%3Cpath%20fill%3D%22%23fff48c%22%20d%3D%22M24%2019a4.49%204.49%200%200%200-1.92%208.56l5-7.31A4.5%204.5%200%200%200%2024%2019%22%2F%3E%3Cpath%20fill%3D%22%236dd627%22%20d%3D%22M19.5%2012a4.5%204.5%200%201%200%209%200a4.5%204.5%200%201%200-9%200%22%2F%3E%3Cpath%20fill%3D%22%239ceb60%22%20d%3D%22M24%207.5a4.49%204.49%200%200%200-1.92%208.56l5-7.31A4.5%204.5%200%200%200%2024%207.5%22%2F%3E%3Cpath%20fill%3D%22%23ff6242%22%20d%3D%22M19.5%2035a4.5%204.5%200%201%200%209%200a4.5%204.5%200%201%200-9%200%22%2F%3E%3Cpath%20fill%3D%22%23ff866e%22%20d%3D%22M24%2030.5a4.49%204.49%200%200%200-1.92%208.56l5-7.31A4.5%204.5%200%200%200%2024%2030.5%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%2345413c%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M19.5%2023.5a4.5%204.5%200%201%200%209%200a4.5%204.5%200%201%200-9%200m0-11.5a4.5%204.5%200%201%200%209%200a4.5%204.5%200%201%200-9%200m0%2023a4.5%204.5%200%201%200%209%200a4.5%204.5%200%201%200-9%200%22%2F%3E%3Cpath%20fill%3D%22%23bdbec0%22%20stroke%3D%22%2345413c%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M29%2034.7c0%202.76-.81-2.5-5-2.5s-5%205.26-5%202.5a5%205%200%200%201%2010%200m0-11.5c0%202.76-.81-2.5-5-2.5s-5%205.3-5%202.5a5%205%200%200%201%2010%200m0-11.5c0%202.76-.81-2.5-5-2.5s-5%205.26-5%202.5a5%205%200%200%201%2010%200%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/streamline-emojis/vertical-traffic-light.svg?color=%231a73e8&size=48