vertical traffic light emoji

vertical-traffic-light from Fluent Emoji High Contrast by Microsoft Corporation · Default · Travel & Places · MIT Free for personal and commercial use.

Name: vertical-traffic-light
Set: Fluent Emoji High Contrast
Style: Default
Category: Travel & Places
Viewbox: 32×32
License: MIT

The same emoji in other sets

vertical-traffic-lightEmoji One (Colored)vertical-traffic-lightFluent Emoji vertical-traffic-lightFluent Emoji Flat vertical-traffic-lightNoto Emoji vertical-traffic-lightOpenMoji vertical-traffic-lightStreamline Emojis vertical-traffic-lightTwitter Emoji

More travel & places icons from Fluent Emoji High Contrast

Use the vertical traffic light emoji

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="currentColor"><path d="M12.8 7c-.341 0-.591-.324-.451-.636a4 4 0 0 1 7.302 0c.14.312-.11.636-.452.636a.59.59 0 0 1-.514-.34a3 3 0 1 1-5.37 0a.59.59 0 0 1-.514.34M18 7a1 1 0 1 0-2 0a1 1 0 0 0 2 0m-5.651 7.364c-.14.312.11.636.452.636a.59.59 0 0 0 .514-.34a3 3 0 1 0 5.37 0c.099.198.292.34.514.34c.342 0 .592-.324.452-.636a4.001 4.001 0 0 0-7.302 0M17 16a1 1 0 1 1 0-2a1 1 0 0 1 0 2m-4.652 6.364c-.14.312.11.636.452.636c.221 0 .514-.34.514-.34S13 23 13 24a3 3 0 1 0 5.698-1.312a.58.58 0 0 0 .5.312c.342 0 .592-.324.452-.636a4 4 0 0 0-7.302 0M18 23a1 1 0 1 1-2 0a1 1 0 0 1 2 0"/><path d="M24 8.006C24 3.59 20.417 0 16 0S8 3.59 8 8.006v15.988C8 28.41 11.583 32 16 32s8-3.59 8-8.006zM16 2c3.31 0 6 2.693 6 6.006v15.988A6.01 6.01 0 0 1 16 30c-3.31 0-6-2.693-6-6.006V8.006A6.01 6.01 0 0 1 16 2"/></g></svg>

React

import type { SVGProps } from "react";

export function FluentEmojiHighContrastVerticalTrafficLight(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="currentColor"><path d="M12.8 7c-.341 0-.591-.324-.451-.636a4 4 0 0 1 7.302 0c.14.312-.11.636-.452.636a.59.59 0 0 1-.514-.34a3 3 0 1 1-5.37 0a.59.59 0 0 1-.514.34M18 7a1 1 0 1 0-2 0a1 1 0 0 0 2 0m-5.651 7.364c-.14.312.11.636.452.636a.59.59 0 0 0 .514-.34a3 3 0 1 0 5.37 0c.099.198.292.34.514.34c.342 0 .592-.324.452-.636a4.001 4.001 0 0 0-7.302 0M17 16a1 1 0 1 1 0-2a1 1 0 0 1 0 2m-4.652 6.364c-.14.312.11.636.452.636c.221 0 .514-.34.514-.34S13 23 13 24a3 3 0 1 0 5.698-1.312a.58.58 0 0 0 .5.312c.342 0 .592-.324.452-.636a4 4 0 0 0-7.302 0M18 23a1 1 0 1 1-2 0a1 1 0 0 1 2 0"/><path d="M24 8.006C24 3.59 20.417 0 16 0S8 3.59 8 8.006v15.988C8 28.41 11.583 32 16 32s8-3.59 8-8.006zM16 2c3.31 0 6 2.693 6 6.006v15.988A6.01 6.01 0 0 1 16 30c-3.31 0-6-2.693-6-6.006V8.006A6.01 6.01 0 0 1 16 2"/></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="currentColor"><path d="M12.8 7c-.341 0-.591-.324-.451-.636a4 4 0 0 1 7.302 0c.14.312-.11.636-.452.636a.59.59 0 0 1-.514-.34a3 3 0 1 1-5.37 0a.59.59 0 0 1-.514.34M18 7a1 1 0 1 0-2 0a1 1 0 0 0 2 0m-5.651 7.364c-.14.312.11.636.452.636a.59.59 0 0 0 .514-.34a3 3 0 1 0 5.37 0c.099.198.292.34.514.34c.342 0 .592-.324.452-.636a4.001 4.001 0 0 0-7.302 0M17 16a1 1 0 1 1 0-2a1 1 0 0 1 0 2m-4.652 6.364c-.14.312.11.636.452.636c.221 0 .514-.34.514-.34S13 23 13 24a3 3 0 1 0 5.698-1.312a.58.58 0 0 0 .5.312c.342 0 .592-.324.452-.636a4 4 0 0 0-7.302 0M18 23a1 1 0 1 1-2 0a1 1 0 0 1 2 0"/><path d="M24 8.006C24 3.59 20.417 0 16 0S8 3.59 8 8.006v15.988C8 28.41 11.583 32 16 32s8-3.59 8-8.006zM16 2c3.31 0 6 2.693 6 6.006v15.988A6.01 6.01 0 0 1 16 30c-3.31 0-6-2.693-6-6.006V8.006A6.01 6.01 0 0 1 16 2"/></g></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%2032%2032%22%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M12.8%207c-.341%200-.591-.324-.451-.636a4%204%200%200%201%207.302%200c.14.312-.11.636-.452.636a.59.59%200%200%201-.514-.34a3%203%200%201%201-5.37%200a.59.59%200%200%201-.514.34M18%207a1%201%200%201%200-2%200a1%201%200%200%200%202%200m-5.651%207.364c-.14.312.11.636.452.636a.59.59%200%200%200%20.514-.34a3%203%200%201%200%205.37%200c.099.198.292.34.514.34c.342%200%20.592-.324.452-.636a4.001%204.001%200%200%200-7.302%200M17%2016a1%201%200%201%201%200-2a1%201%200%200%201%200%202m-4.652%206.364c-.14.312.11.636.452.636c.221%200%20.514-.34.514-.34S13%2023%2013%2024a3%203%200%201%200%205.698-1.312a.58.58%200%200%200%20.5.312c.342%200%20.592-.324.452-.636a4%204%200%200%200-7.302%200M18%2023a1%201%200%201%201-2%200a1%201%200%200%201%202%200%22%2F%3E%3Cpath%20d%3D%22M24%208.006C24%203.59%2020.417%200%2016%200S8%203.59%208%208.006v15.988C8%2028.41%2011.583%2032%2016%2032s8-3.59%208-8.006zM16%202c3.31%200%206%202.693%206%206.006v15.988A6.01%206.01%200%200%201%2016%2030c-3.31%200-6-2.693-6-6.006V8.006A6.01%206.01%200%200%201%2016%202%22%2F%3E%3C%2Fg%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%2032%2032%22%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M12.8%207c-.341%200-.591-.324-.451-.636a4%204%200%200%201%207.302%200c.14.312-.11.636-.452.636a.59.59%200%200%201-.514-.34a3%203%200%201%201-5.37%200a.59.59%200%200%201-.514.34M18%207a1%201%200%201%200-2%200a1%201%200%200%200%202%200m-5.651%207.364c-.14.312.11.636.452.636a.59.59%200%200%200%20.514-.34a3%203%200%201%200%205.37%200c.099.198.292.34.514.34c.342%200%20.592-.324.452-.636a4.001%204.001%200%200%200-7.302%200M17%2016a1%201%200%201%201%200-2a1%201%200%200%201%200%202m-4.652%206.364c-.14.312.11.636.452.636c.221%200%20.514-.34.514-.34S13%2023%2013%2024a3%203%200%201%200%205.698-1.312a.58.58%200%200%200%20.5.312c.342%200%20.592-.324.452-.636a4%204%200%200%200-7.302%200M18%2023a1%201%200%201%201-2%200a1%201%200%200%201%202%200%22%2F%3E%3Cpath%20d%3D%22M24%208.006C24%203.59%2020.417%200%2016%200S8%203.59%208%208.006v15.988C8%2028.41%2011.583%2032%2016%2032s8-3.59%208-8.006zM16%202c3.31%200%206%202.693%206%206.006v15.988A6.01%206.01%200%200%201%2016%2030c-3.31%200-6-2.693-6-6.006V8.006A6.01%206.01%200%200%201%2016%202%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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