metro logo
metro from Material Icon Theme by Material Extensions · Color · MIT Free for personal and commercial use.
- Name
- metro
- Set
- Material Icon Theme
- Style
- Color
- Viewbox
- 16×16
- License
- MIT
The same logo in other sets
Use the metro logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="#ef5350" d="M8 1.258a2.2 2.2 0 0 0-.979.23L2.978 3.512A1.77 1.77 0 0 0 2 5.094v5.812a1.77 1.77 0 0 0 .978 1.582l4.043 2.024a2.19 2.19 0 0 0 1.957 0l4.043-2.024A1.77 1.77 0 0 0 14 10.906V5.094a1.77 1.77 0 0 0-.979-1.582L8.978 1.488A2.2 2.2 0 0 0 8 1.258m0 .996a2.16 2.16 0 0 1 .965.228L12 4l-1.25.625L8 3.25L5.25 4.625L4 4l3.035-1.518A2.16 2.16 0 0 1 8 2.254M3.7 4.91a.7.7 0 0 1 .257.068L8 7l4.043-2.022a.7.7 0 0 1 .234-.066a.66.66 0 0 1 .723.658v4.61a1.73 1.73 0 0 1-.957 1.548l-3.086 1.543a2.14 2.14 0 0 1-1.914 0l-3.086-1.543A1.73 1.73 0 0 1 3 10.18V5.57a.66.66 0 0 1 .7-.66M4 6.25v4.25l4 2l4-2V6.25L8.9 7.8a2.01 2.01 0 0 1-1.8 0z"/></svg>
React
import type { SVGProps } from "react";
export function MaterialIconThemeMetro(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="#ef5350" d="M8 1.258a2.2 2.2 0 0 0-.979.23L2.978 3.512A1.77 1.77 0 0 0 2 5.094v5.812a1.77 1.77 0 0 0 .978 1.582l4.043 2.024a2.19 2.19 0 0 0 1.957 0l4.043-2.024A1.77 1.77 0 0 0 14 10.906V5.094a1.77 1.77 0 0 0-.979-1.582L8.978 1.488A2.2 2.2 0 0 0 8 1.258m0 .996a2.16 2.16 0 0 1 .965.228L12 4l-1.25.625L8 3.25L5.25 4.625L4 4l3.035-1.518A2.16 2.16 0 0 1 8 2.254M3.7 4.91a.7.7 0 0 1 .257.068L8 7l4.043-2.022a.7.7 0 0 1 .234-.066a.66.66 0 0 1 .723.658v4.61a1.73 1.73 0 0 1-.957 1.548l-3.086 1.543a2.14 2.14 0 0 1-1.914 0l-3.086-1.543A1.73 1.73 0 0 1 3 10.18V5.57a.66.66 0 0 1 .7-.66M4 6.25v4.25l4 2l4-2V6.25L8.9 7.8a2.01 2.01 0 0 1-1.8 0z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="#ef5350" d="M8 1.258a2.2 2.2 0 0 0-.979.23L2.978 3.512A1.77 1.77 0 0 0 2 5.094v5.812a1.77 1.77 0 0 0 .978 1.582l4.043 2.024a2.19 2.19 0 0 0 1.957 0l4.043-2.024A1.77 1.77 0 0 0 14 10.906V5.094a1.77 1.77 0 0 0-.979-1.582L8.978 1.488A2.2 2.2 0 0 0 8 1.258m0 .996a2.16 2.16 0 0 1 .965.228L12 4l-1.25.625L8 3.25L5.25 4.625L4 4l3.035-1.518A2.16 2.16 0 0 1 8 2.254M3.7 4.91a.7.7 0 0 1 .257.068L8 7l4.043-2.022a.7.7 0 0 1 .234-.066a.66.66 0 0 1 .723.658v4.61a1.73 1.73 0 0 1-.957 1.548l-3.086 1.543a2.14 2.14 0 0 1-1.914 0l-3.086-1.543A1.73 1.73 0 0 1 3 10.18V5.57a.66.66 0 0 1 .7-.66M4 6.25v4.25l4 2l4-2V6.25L8.9 7.8a2.01 2.01 0 0 1-1.8 0z"/></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%2016%2016%22%3E%3Cpath%20fill%3D%22%23ef5350%22%20d%3D%22M8%201.258a2.2%202.2%200%200%200-.979.23L2.978%203.512A1.77%201.77%200%200%200%202%205.094v5.812a1.77%201.77%200%200%200%20.978%201.582l4.043%202.024a2.19%202.19%200%200%200%201.957%200l4.043-2.024A1.77%201.77%200%200%200%2014%2010.906V5.094a1.77%201.77%200%200%200-.979-1.582L8.978%201.488A2.2%202.2%200%200%200%208%201.258m0%20.996a2.16%202.16%200%200%201%20.965.228L12%204l-1.25.625L8%203.25L5.25%204.625L4%204l3.035-1.518A2.16%202.16%200%200%201%208%202.254M3.7%204.91a.7.7%200%200%201%20.257.068L8%207l4.043-2.022a.7.7%200%200%201%20.234-.066a.66.66%200%200%201%20.723.658v4.61a1.73%201.73%200%200%201-.957%201.548l-3.086%201.543a2.14%202.14%200%200%201-1.914%200l-3.086-1.543A1.73%201.73%200%200%201%203%2010.18V5.57a.66.66%200%200%201%20.7-.66M4%206.25v4.25l4%202l4-2V6.25L8.9%207.8a2.01%202.01%200%200%201-1.8%200z%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%2016%2016%22%3E%3Cpath%20fill%3D%22%23ef5350%22%20d%3D%22M8%201.258a2.2%202.2%200%200%200-.979.23L2.978%203.512A1.77%201.77%200%200%200%202%205.094v5.812a1.77%201.77%200%200%200%20.978%201.582l4.043%202.024a2.19%202.19%200%200%200%201.957%200l4.043-2.024A1.77%201.77%200%200%200%2014%2010.906V5.094a1.77%201.77%200%200%200-.979-1.582L8.978%201.488A2.2%202.2%200%200%200%208%201.258m0%20.996a2.16%202.16%200%200%201%20.965.228L12%204l-1.25.625L8%203.25L5.25%204.625L4%204l3.035-1.518A2.16%202.16%200%200%201%208%202.254M3.7%204.91a.7.7%200%200%201%20.257.068L8%207l4.043-2.022a.7.7%200%200%201%20.234-.066a.66.66%200%200%201%20.723.658v4.61a1.73%201.73%200%200%201-.957%201.548l-3.086%201.543a2.14%202.14%200%200%201-1.914%200l-3.086-1.543A1.73%201.73%200%200%201%203%2010.18V5.57a.66.66%200%200%201%20.7-.66M4%206.25v4.25l4%202l4-2V6.25L8.9%207.8a2.01%202.01%200%200%201-1.8%200z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-icon-theme/metro.svg?color=%231a73e8&size=48
