metro icon
metro from Unicons by Iconscout · Line · Transport · Apache-2.0 Free for personal and commercial use.
- Name
- metro
- Set
- Unicons
- Style
- Line
- Category
- Transport
- Viewbox
- 24×24
- License
- Apache 2.0
The same icon in other sets
More transport icons from Unicons
Use the metro icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M8.71 14.29a1 1 0 0 0-1.09-.21a.9.9 0 0 0-.54.54a1 1 0 1 0 1.84 0a1.2 1.2 0 0 0-.21-.33m8 0a1.047 1.047 0 0 0-1.42 0a1.2 1.2 0 0 0-.21.33a.99.99 0 0 0 .21 1.09a1.2 1.2 0 0 0 .33.21a.94.94 0 0 0 .76 0a1.2 1.2 0 0 0 .33-.21a.99.99 0 0 0 .21-1.09a1.2 1.2 0 0 0-.21-.33m2.6 4.605a4.97 4.97 0 0 0 1.784-4.817l-1.5-8A5 5 0 0 0 14.68 2H9.319a5 5 0 0 0-4.913 4.078l-1.5 8a4.97 4.97 0 0 0 1.785 4.817l-1.398 1.398a1 1 0 1 0 1.414 1.414l1.87-1.87A5 5 0 0 0 7.818 20h8.362a5 5 0 0 0 1.243-.162l1.869 1.869a1 1 0 0 0 1.414-1.414ZM6.37 6.447A3 3 0 0 1 9.32 4h5.362a3 3 0 0 1 2.948 2.447l.347 1.85a7.955 7.955 0 0 1-11.952 0Zm12.117 10.469A2.99 2.99 0 0 1 16.181 18H7.819a3 3 0 0 1-2.948-3.553l.711-3.792a9.954 9.954 0 0 0 12.836 0l.71 3.792a2.99 2.99 0 0 1-.64 2.469"/></svg>
React
import type { SVGProps } from "react";
export function UilMetro(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M8.71 14.29a1 1 0 0 0-1.09-.21a.9.9 0 0 0-.54.54a1 1 0 1 0 1.84 0a1.2 1.2 0 0 0-.21-.33m8 0a1.047 1.047 0 0 0-1.42 0a1.2 1.2 0 0 0-.21.33a.99.99 0 0 0 .21 1.09a1.2 1.2 0 0 0 .33.21a.94.94 0 0 0 .76 0a1.2 1.2 0 0 0 .33-.21a.99.99 0 0 0 .21-1.09a1.2 1.2 0 0 0-.21-.33m2.6 4.605a4.97 4.97 0 0 0 1.784-4.817l-1.5-8A5 5 0 0 0 14.68 2H9.319a5 5 0 0 0-4.913 4.078l-1.5 8a4.97 4.97 0 0 0 1.785 4.817l-1.398 1.398a1 1 0 1 0 1.414 1.414l1.87-1.87A5 5 0 0 0 7.818 20h8.362a5 5 0 0 0 1.243-.162l1.869 1.869a1 1 0 0 0 1.414-1.414ZM6.37 6.447A3 3 0 0 1 9.32 4h5.362a3 3 0 0 1 2.948 2.447l.347 1.85a7.955 7.955 0 0 1-11.952 0Zm12.117 10.469A2.99 2.99 0 0 1 16.181 18H7.819a3 3 0 0 1-2.948-3.553l.711-3.792a9.954 9.954 0 0 0 12.836 0l.71 3.792a2.99 2.99 0 0 1-.64 2.469"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M8.71 14.29a1 1 0 0 0-1.09-.21a.9.9 0 0 0-.54.54a1 1 0 1 0 1.84 0a1.2 1.2 0 0 0-.21-.33m8 0a1.047 1.047 0 0 0-1.42 0a1.2 1.2 0 0 0-.21.33a.99.99 0 0 0 .21 1.09a1.2 1.2 0 0 0 .33.21a.94.94 0 0 0 .76 0a1.2 1.2 0 0 0 .33-.21a.99.99 0 0 0 .21-1.09a1.2 1.2 0 0 0-.21-.33m2.6 4.605a4.97 4.97 0 0 0 1.784-4.817l-1.5-8A5 5 0 0 0 14.68 2H9.319a5 5 0 0 0-4.913 4.078l-1.5 8a4.97 4.97 0 0 0 1.785 4.817l-1.398 1.398a1 1 0 1 0 1.414 1.414l1.87-1.87A5 5 0 0 0 7.818 20h8.362a5 5 0 0 0 1.243-.162l1.869 1.869a1 1 0 0 0 1.414-1.414ZM6.37 6.447A3 3 0 0 1 9.32 4h5.362a3 3 0 0 1 2.948 2.447l.347 1.85a7.955 7.955 0 0 1-11.952 0Zm12.117 10.469A2.99 2.99 0 0 1 16.181 18H7.819a3 3 0 0 1-2.948-3.553l.711-3.792a9.954 9.954 0 0 0 12.836 0l.71 3.792a2.99 2.99 0 0 1-.64 2.469"/></svg> </template>
CSS
.icon-metro {
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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M8.71%2014.29a1%201%200%200%200-1.09-.21a.9.9%200%200%200-.54.54a1%201%200%201%200%201.84%200a1.2%201.2%200%200%200-.21-.33m8%200a1.047%201.047%200%200%200-1.42%200a1.2%201.2%200%200%200-.21.33a.99.99%200%200%200%20.21%201.09a1.2%201.2%200%200%200%20.33.21a.94.94%200%200%200%20.76%200a1.2%201.2%200%200%200%20.33-.21a.99.99%200%200%200%20.21-1.09a1.2%201.2%200%200%200-.21-.33m2.6%204.605a4.97%204.97%200%200%200%201.784-4.817l-1.5-8A5%205%200%200%200%2014.68%202H9.319a5%205%200%200%200-4.913%204.078l-1.5%208a4.97%204.97%200%200%200%201.785%204.817l-1.398%201.398a1%201%200%201%200%201.414%201.414l1.87-1.87A5%205%200%200%200%207.818%2020h8.362a5%205%200%200%200%201.243-.162l1.869%201.869a1%201%200%200%200%201.414-1.414ZM6.37%206.447A3%203%200%200%201%209.32%204h5.362a3%203%200%200%201%202.948%202.447l.347%201.85a7.955%207.955%200%200%201-11.952%200Zm12.117%2010.469A2.99%202.99%200%200%201%2016.181%2018H7.819a3%203%200%200%201-2.948-3.553l.711-3.792a9.954%209.954%200%200%200%2012.836%200l.71%203.792a2.99%202.99%200%200%201-.64%202.469%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M8.71%2014.29a1%201%200%200%200-1.09-.21a.9.9%200%200%200-.54.54a1%201%200%201%200%201.84%200a1.2%201.2%200%200%200-.21-.33m8%200a1.047%201.047%200%200%200-1.42%200a1.2%201.2%200%200%200-.21.33a.99.99%200%200%200%20.21%201.09a1.2%201.2%200%200%200%20.33.21a.94.94%200%200%200%20.76%200a1.2%201.2%200%200%200%20.33-.21a.99.99%200%200%200%20.21-1.09a1.2%201.2%200%200%200-.21-.33m2.6%204.605a4.97%204.97%200%200%200%201.784-4.817l-1.5-8A5%205%200%200%200%2014.68%202H9.319a5%205%200%200%200-4.913%204.078l-1.5%208a4.97%204.97%200%200%200%201.785%204.817l-1.398%201.398a1%201%200%201%200%201.414%201.414l1.87-1.87A5%205%200%200%200%207.818%2020h8.362a5%205%200%200%200%201.243-.162l1.869%201.869a1%201%200%200%200%201.414-1.414ZM6.37%206.447A3%203%200%200%201%209.32%204h5.362a3%203%200%200%201%202.948%202.447l.347%201.85a7.955%207.955%200%200%201-11.952%200Zm12.117%2010.469A2.99%202.99%200%200%201%2016.181%2018H7.819a3%203%200%200%201-2.948-3.553l.711-3.792a9.954%209.954%200%200%200%2012.836%200l.71%203.792a2.99%202.99%200%200%201-.64%202.469%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/uil/metro.svg?color=%231a73e8&size=48
