horizontal traffic light emoji
horizontal-traffic-light from Noto Emoji by Google Inc · Default · Travel & Places · Apache-2.0 Free for personal and commercial use.
- Name
- horizontal-traffic-light
- Set
- Noto Emoji
- Style
- Default
- Category
- Travel & Places
- Viewbox
- 128×128
- License
- Apache 2.0
The same emoji in other sets
More travel & places icons from Noto Emoji
Use the horizontal traffic light emoji
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#424242" d="M4 64c0 14.357 11.113 25.658 26.586 25.658h66.828C112.887 89.658 124 78.358 124 64s-11.113-25.658-26.586-25.658H30.586C15.113 38.342 4 49.642 4 64"/><circle cx="96.874" cy="66.83" r="11.822" fill="#f44336"/><path fill="#ff8155" d="M88.623 67.87c-1.005-.317-1.278-3.843 1.075-6.673c3.51-4.223 8.56-4.117 9.098-1.87c.75 3.148-3.235 1.905-6.268 4.444c-1.895 1.587-2.31 4.602-3.905 4.1"/><path fill="#757575" d="M84.074 61.206c-.414.81-1.666.775-1.551-.459c.282-3.006 1.992-5.369 3.394-6.814c2.785-2.927 6.876-4.593 10.957-4.584c4.082-.018 8.172 1.657 10.967 4.575c1.402 1.446 3.394 4.672 3.403 6.92c0 .979-1.111 1.243-1.517.45c-1.013-1.975-4.152-8.42-12.844-8.42c-8.71 0-11.804 6.374-12.809 8.332"/><circle cx="31.115" cy="66.795" r="11.822" fill="#4caf50"/><path fill="#6fd86f" d="M22.864 67.826c-1.005-.317-1.278-3.844 1.076-6.673c3.508-4.223 8.56-4.117 9.097-1.87c.75 3.148-3.235 1.905-6.268 4.444c-1.895 1.587-2.31 4.601-3.905 4.099"/><path fill="#757575" d="M18.315 61.24c-.414.812-1.666.777-1.551-.458c.282-3.006 1.992-5.368 3.394-6.814c2.785-2.927 6.876-4.593 10.957-4.584c4.082-.018 8.172 1.657 10.967 4.575c1.402 1.446 3.394 4.672 3.403 6.92c0 .979-1.111 1.243-1.517.45c-1.013-1.975-4.152-8.419-12.844-8.419c-8.71 0-11.804 6.383-12.809 8.33"/><circle cx="63.995" cy="66.812" r="11.822" fill="#ffca28"/><path fill="#fff59d" d="M55.744 67.852c-1.005-.317-1.279-3.843 1.075-6.673c3.509-4.223 8.56-4.117 9.098-1.869c.749 3.147-3.236 1.904-6.268 4.443c-1.896 1.587-2.31 4.602-3.905 4.1"/><path fill="#757575" d="M51.195 61.223c-.415.811-1.666.776-1.552-.458c.282-3.006 1.992-5.369 3.394-6.815c2.786-2.926 6.876-4.593 10.958-4.584c4.081-.017 8.172 1.658 10.966 4.576c1.402 1.445 3.394 4.672 3.403 6.92c0 .978-1.11 1.243-1.516.45c-1.014-1.975-4.152-8.42-12.844-8.42s-11.804 6.374-12.81 8.331"/></svg>
React
import type { SVGProps } from "react";
export function NotoHorizontalTrafficLight(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#424242" d="M4 64c0 14.357 11.113 25.658 26.586 25.658h66.828C112.887 89.658 124 78.358 124 64s-11.113-25.658-26.586-25.658H30.586C15.113 38.342 4 49.642 4 64"/><circle cx="96.874" cy="66.83" r="11.822" fill="#f44336"/><path fill="#ff8155" d="M88.623 67.87c-1.005-.317-1.278-3.843 1.075-6.673c3.51-4.223 8.56-4.117 9.098-1.87c.75 3.148-3.235 1.905-6.268 4.444c-1.895 1.587-2.31 4.602-3.905 4.1"/><path fill="#757575" d="M84.074 61.206c-.414.81-1.666.775-1.551-.459c.282-3.006 1.992-5.369 3.394-6.814c2.785-2.927 6.876-4.593 10.957-4.584c4.082-.018 8.172 1.657 10.967 4.575c1.402 1.446 3.394 4.672 3.403 6.92c0 .979-1.111 1.243-1.517.45c-1.013-1.975-4.152-8.42-12.844-8.42c-8.71 0-11.804 6.374-12.809 8.332"/><circle cx="31.115" cy="66.795" r="11.822" fill="#4caf50"/><path fill="#6fd86f" d="M22.864 67.826c-1.005-.317-1.278-3.844 1.076-6.673c3.508-4.223 8.56-4.117 9.097-1.87c.75 3.148-3.235 1.905-6.268 4.444c-1.895 1.587-2.31 4.601-3.905 4.099"/><path fill="#757575" d="M18.315 61.24c-.414.812-1.666.777-1.551-.458c.282-3.006 1.992-5.368 3.394-6.814c2.785-2.927 6.876-4.593 10.957-4.584c4.082-.018 8.172 1.657 10.967 4.575c1.402 1.446 3.394 4.672 3.403 6.92c0 .979-1.111 1.243-1.517.45c-1.013-1.975-4.152-8.419-12.844-8.419c-8.71 0-11.804 6.383-12.809 8.33"/><circle cx="63.995" cy="66.812" r="11.822" fill="#ffca28"/><path fill="#fff59d" d="M55.744 67.852c-1.005-.317-1.279-3.843 1.075-6.673c3.509-4.223 8.56-4.117 9.098-1.869c.749 3.147-3.236 1.904-6.268 4.443c-1.896 1.587-2.31 4.602-3.905 4.1"/><path fill="#757575" d="M51.195 61.223c-.415.811-1.666.776-1.552-.458c.282-3.006 1.992-5.369 3.394-6.815c2.786-2.926 6.876-4.593 10.958-4.584c4.081-.017 8.172 1.658 10.966 4.576c1.402 1.445 3.394 4.672 3.403 6.92c0 .978-1.11 1.243-1.516.45c-1.014-1.975-4.152-8.42-12.844-8.42s-11.804 6.374-12.81 8.331"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#424242" d="M4 64c0 14.357 11.113 25.658 26.586 25.658h66.828C112.887 89.658 124 78.358 124 64s-11.113-25.658-26.586-25.658H30.586C15.113 38.342 4 49.642 4 64"/><circle cx="96.874" cy="66.83" r="11.822" fill="#f44336"/><path fill="#ff8155" d="M88.623 67.87c-1.005-.317-1.278-3.843 1.075-6.673c3.51-4.223 8.56-4.117 9.098-1.87c.75 3.148-3.235 1.905-6.268 4.444c-1.895 1.587-2.31 4.602-3.905 4.1"/><path fill="#757575" d="M84.074 61.206c-.414.81-1.666.775-1.551-.459c.282-3.006 1.992-5.369 3.394-6.814c2.785-2.927 6.876-4.593 10.957-4.584c4.082-.018 8.172 1.657 10.967 4.575c1.402 1.446 3.394 4.672 3.403 6.92c0 .979-1.111 1.243-1.517.45c-1.013-1.975-4.152-8.42-12.844-8.42c-8.71 0-11.804 6.374-12.809 8.332"/><circle cx="31.115" cy="66.795" r="11.822" fill="#4caf50"/><path fill="#6fd86f" d="M22.864 67.826c-1.005-.317-1.278-3.844 1.076-6.673c3.508-4.223 8.56-4.117 9.097-1.87c.75 3.148-3.235 1.905-6.268 4.444c-1.895 1.587-2.31 4.601-3.905 4.099"/><path fill="#757575" d="M18.315 61.24c-.414.812-1.666.777-1.551-.458c.282-3.006 1.992-5.368 3.394-6.814c2.785-2.927 6.876-4.593 10.957-4.584c4.082-.018 8.172 1.657 10.967 4.575c1.402 1.446 3.394 4.672 3.403 6.92c0 .979-1.111 1.243-1.517.45c-1.013-1.975-4.152-8.419-12.844-8.419c-8.71 0-11.804 6.383-12.809 8.33"/><circle cx="63.995" cy="66.812" r="11.822" fill="#ffca28"/><path fill="#fff59d" d="M55.744 67.852c-1.005-.317-1.279-3.843 1.075-6.673c3.509-4.223 8.56-4.117 9.098-1.869c.749 3.147-3.236 1.904-6.268 4.443c-1.896 1.587-2.31 4.602-3.905 4.1"/><path fill="#757575" d="M51.195 61.223c-.415.811-1.666.776-1.552-.458c.282-3.006 1.992-5.369 3.394-6.815c2.786-2.926 6.876-4.593 10.958-4.584c4.081-.017 8.172 1.658 10.966 4.576c1.402 1.445 3.394 4.672 3.403 6.92c0 .978-1.11 1.243-1.516.45c-1.014-1.975-4.152-8.42-12.844-8.42s-11.804 6.374-12.81 8.331"/></svg> </template>
CSS
.icon-horizontal-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%20128%20128%22%3E%3Cpath%20fill%3D%22%23424242%22%20d%3D%22M4%2064c0%2014.357%2011.113%2025.658%2026.586%2025.658h66.828C112.887%2089.658%20124%2078.358%20124%2064s-11.113-25.658-26.586-25.658H30.586C15.113%2038.342%204%2049.642%204%2064%22%2F%3E%3Ccircle%20cx%3D%2296.874%22%20cy%3D%2266.83%22%20r%3D%2211.822%22%20fill%3D%22%23f44336%22%2F%3E%3Cpath%20fill%3D%22%23ff8155%22%20d%3D%22M88.623%2067.87c-1.005-.317-1.278-3.843%201.075-6.673c3.51-4.223%208.56-4.117%209.098-1.87c.75%203.148-3.235%201.905-6.268%204.444c-1.895%201.587-2.31%204.602-3.905%204.1%22%2F%3E%3Cpath%20fill%3D%22%23757575%22%20d%3D%22M84.074%2061.206c-.414.81-1.666.775-1.551-.459c.282-3.006%201.992-5.369%203.394-6.814c2.785-2.927%206.876-4.593%2010.957-4.584c4.082-.018%208.172%201.657%2010.967%204.575c1.402%201.446%203.394%204.672%203.403%206.92c0%20.979-1.111%201.243-1.517.45c-1.013-1.975-4.152-8.42-12.844-8.42c-8.71%200-11.804%206.374-12.809%208.332%22%2F%3E%3Ccircle%20cx%3D%2231.115%22%20cy%3D%2266.795%22%20r%3D%2211.822%22%20fill%3D%22%234caf50%22%2F%3E%3Cpath%20fill%3D%22%236fd86f%22%20d%3D%22M22.864%2067.826c-1.005-.317-1.278-3.844%201.076-6.673c3.508-4.223%208.56-4.117%209.097-1.87c.75%203.148-3.235%201.905-6.268%204.444c-1.895%201.587-2.31%204.601-3.905%204.099%22%2F%3E%3Cpath%20fill%3D%22%23757575%22%20d%3D%22M18.315%2061.24c-.414.812-1.666.777-1.551-.458c.282-3.006%201.992-5.368%203.394-6.814c2.785-2.927%206.876-4.593%2010.957-4.584c4.082-.018%208.172%201.657%2010.967%204.575c1.402%201.446%203.394%204.672%203.403%206.92c0%20.979-1.111%201.243-1.517.45c-1.013-1.975-4.152-8.419-12.844-8.419c-8.71%200-11.804%206.383-12.809%208.33%22%2F%3E%3Ccircle%20cx%3D%2263.995%22%20cy%3D%2266.812%22%20r%3D%2211.822%22%20fill%3D%22%23ffca28%22%2F%3E%3Cpath%20fill%3D%22%23fff59d%22%20d%3D%22M55.744%2067.852c-1.005-.317-1.279-3.843%201.075-6.673c3.509-4.223%208.56-4.117%209.098-1.869c.749%203.147-3.236%201.904-6.268%204.443c-1.896%201.587-2.31%204.602-3.905%204.1%22%2F%3E%3Cpath%20fill%3D%22%23757575%22%20d%3D%22M51.195%2061.223c-.415.811-1.666.776-1.552-.458c.282-3.006%201.992-5.369%203.394-6.815c2.786-2.926%206.876-4.593%2010.958-4.584c4.081-.017%208.172%201.658%2010.966%204.576c1.402%201.445%203.394%204.672%203.403%206.92c0%20.978-1.11%201.243-1.516.45c-1.014-1.975-4.152-8.42-12.844-8.42s-11.804%206.374-12.81%208.331%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%20128%20128%22%3E%3Cpath%20fill%3D%22%23424242%22%20d%3D%22M4%2064c0%2014.357%2011.113%2025.658%2026.586%2025.658h66.828C112.887%2089.658%20124%2078.358%20124%2064s-11.113-25.658-26.586-25.658H30.586C15.113%2038.342%204%2049.642%204%2064%22%2F%3E%3Ccircle%20cx%3D%2296.874%22%20cy%3D%2266.83%22%20r%3D%2211.822%22%20fill%3D%22%23f44336%22%2F%3E%3Cpath%20fill%3D%22%23ff8155%22%20d%3D%22M88.623%2067.87c-1.005-.317-1.278-3.843%201.075-6.673c3.51-4.223%208.56-4.117%209.098-1.87c.75%203.148-3.235%201.905-6.268%204.444c-1.895%201.587-2.31%204.602-3.905%204.1%22%2F%3E%3Cpath%20fill%3D%22%23757575%22%20d%3D%22M84.074%2061.206c-.414.81-1.666.775-1.551-.459c.282-3.006%201.992-5.369%203.394-6.814c2.785-2.927%206.876-4.593%2010.957-4.584c4.082-.018%208.172%201.657%2010.967%204.575c1.402%201.446%203.394%204.672%203.403%206.92c0%20.979-1.111%201.243-1.517.45c-1.013-1.975-4.152-8.42-12.844-8.42c-8.71%200-11.804%206.374-12.809%208.332%22%2F%3E%3Ccircle%20cx%3D%2231.115%22%20cy%3D%2266.795%22%20r%3D%2211.822%22%20fill%3D%22%234caf50%22%2F%3E%3Cpath%20fill%3D%22%236fd86f%22%20d%3D%22M22.864%2067.826c-1.005-.317-1.278-3.844%201.076-6.673c3.508-4.223%208.56-4.117%209.097-1.87c.75%203.148-3.235%201.905-6.268%204.444c-1.895%201.587-2.31%204.601-3.905%204.099%22%2F%3E%3Cpath%20fill%3D%22%23757575%22%20d%3D%22M18.315%2061.24c-.414.812-1.666.777-1.551-.458c.282-3.006%201.992-5.368%203.394-6.814c2.785-2.927%206.876-4.593%2010.957-4.584c4.082-.018%208.172%201.657%2010.967%204.575c1.402%201.446%203.394%204.672%203.403%206.92c0%20.979-1.111%201.243-1.517.45c-1.013-1.975-4.152-8.419-12.844-8.419c-8.71%200-11.804%206.383-12.809%208.33%22%2F%3E%3Ccircle%20cx%3D%2263.995%22%20cy%3D%2266.812%22%20r%3D%2211.822%22%20fill%3D%22%23ffca28%22%2F%3E%3Cpath%20fill%3D%22%23fff59d%22%20d%3D%22M55.744%2067.852c-1.005-.317-1.279-3.843%201.075-6.673c3.509-4.223%208.56-4.117%209.098-1.869c.749%203.147-3.236%201.904-6.268%204.443c-1.896%201.587-2.31%204.602-3.905%204.1%22%2F%3E%3Cpath%20fill%3D%22%23757575%22%20d%3D%22M51.195%2061.223c-.415.811-1.666.776-1.552-.458c.282-3.006%201.992-5.369%203.394-6.815c2.786-2.926%206.876-4.593%2010.958-4.584c4.081-.017%208.172%201.658%2010.966%204.576c1.402%201.445%203.394%204.672%203.403%206.92c0%20.978-1.11%201.243-1.516.45c-1.014-1.975-4.152-8.42-12.844-8.42s-11.804%206.374-12.81%208.331%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/noto/horizontal-traffic-light.svg?color=%231a73e8&size=48
