metro logo
metro from Simple Icons by Simple Icons Collaborators · Brand · CC0-1.0 Free for personal and commercial use.
- Name
- metro
- Set
- Simple Icons
- Style
- Brand
- Viewbox
- 24×24
- License
- CC0 1.0
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 24 24"><path fill="currentColor" d="M12 0c-.655 0-1.31.143-1.807.43l-7.31 4.22c-.99.574-1.806 1.98-1.806 3.129v8.442c0 1.14.813 2.555 1.805 3.128l7.311 4.221c.994.573 2.619.573 3.612 0l7.311-4.22c.994-.574 1.807-1.982 1.807-3.129V7.779c0-1.14-.813-2.555-1.807-3.128L13.806.43C13.308.143 12.653 0 11.998 0zm.005 2.606c.29 0 .577.073.834.209l4.718 2.724l-1.76 1.067L12 4.414L8.21 6.602L6.448 5.534l4.71-2.72c.26-.137.551-.21.847-.208m7.577 4.237a.905.905 0 0 1 .909.9c-.001 2.472 0 5.432-.008 8.313a1.76 1.76 0 0 1-.84 1.46l-6.8 3.927a1.7 1.7 0 0 1-.843.215a1.7 1.7 0 0 1-.844-.215l-6.802-3.927a1.76 1.76 0 0 1-.842-1.46V7.75a.905.905 0 0 1 1.376-.765C7.188 8.381 9.626 9.835 12 11.3c2.375-1.443 4.757-2.897 7.115-4.322a.9.9 0 0 1 .467-.135M5.32 9.355v6.632L12 19.844l6.682-3.857V9.355l-6.213 3.773a.9.9 0 0 1-.937 0Z"/></svg>
React
import type { SVGProps } from "react";
export function SimpleIconsMetro(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="M12 0c-.655 0-1.31.143-1.807.43l-7.31 4.22c-.99.574-1.806 1.98-1.806 3.129v8.442c0 1.14.813 2.555 1.805 3.128l7.311 4.221c.994.573 2.619.573 3.612 0l7.311-4.22c.994-.574 1.807-1.982 1.807-3.129V7.779c0-1.14-.813-2.555-1.807-3.128L13.806.43C13.308.143 12.653 0 11.998 0zm.005 2.606c.29 0 .577.073.834.209l4.718 2.724l-1.76 1.067L12 4.414L8.21 6.602L6.448 5.534l4.71-2.72c.26-.137.551-.21.847-.208m7.577 4.237a.905.905 0 0 1 .909.9c-.001 2.472 0 5.432-.008 8.313a1.76 1.76 0 0 1-.84 1.46l-6.8 3.927a1.7 1.7 0 0 1-.843.215a1.7 1.7 0 0 1-.844-.215l-6.802-3.927a1.76 1.76 0 0 1-.842-1.46V7.75a.905.905 0 0 1 1.376-.765C7.188 8.381 9.626 9.835 12 11.3c2.375-1.443 4.757-2.897 7.115-4.322a.9.9 0 0 1 .467-.135M5.32 9.355v6.632L12 19.844l6.682-3.857V9.355l-6.213 3.773a.9.9 0 0 1-.937 0Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 0c-.655 0-1.31.143-1.807.43l-7.31 4.22c-.99.574-1.806 1.98-1.806 3.129v8.442c0 1.14.813 2.555 1.805 3.128l7.311 4.221c.994.573 2.619.573 3.612 0l7.311-4.22c.994-.574 1.807-1.982 1.807-3.129V7.779c0-1.14-.813-2.555-1.807-3.128L13.806.43C13.308.143 12.653 0 11.998 0zm.005 2.606c.29 0 .577.073.834.209l4.718 2.724l-1.76 1.067L12 4.414L8.21 6.602L6.448 5.534l4.71-2.72c.26-.137.551-.21.847-.208m7.577 4.237a.905.905 0 0 1 .909.9c-.001 2.472 0 5.432-.008 8.313a1.76 1.76 0 0 1-.84 1.46l-6.8 3.927a1.7 1.7 0 0 1-.843.215a1.7 1.7 0 0 1-.844-.215l-6.802-3.927a1.76 1.76 0 0 1-.842-1.46V7.75a.905.905 0 0 1 1.376-.765C7.188 8.381 9.626 9.835 12 11.3c2.375-1.443 4.757-2.897 7.115-4.322a.9.9 0 0 1 .467-.135M5.32 9.355v6.632L12 19.844l6.682-3.857V9.355l-6.213 3.773a.9.9 0 0 1-.937 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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%200c-.655%200-1.31.143-1.807.43l-7.31%204.22c-.99.574-1.806%201.98-1.806%203.129v8.442c0%201.14.813%202.555%201.805%203.128l7.311%204.221c.994.573%202.619.573%203.612%200l7.311-4.22c.994-.574%201.807-1.982%201.807-3.129V7.779c0-1.14-.813-2.555-1.807-3.128L13.806.43C13.308.143%2012.653%200%2011.998%200zm.005%202.606c.29%200%20.577.073.834.209l4.718%202.724l-1.76%201.067L12%204.414L8.21%206.602L6.448%205.534l4.71-2.72c.26-.137.551-.21.847-.208m7.577%204.237a.905.905%200%200%201%20.909.9c-.001%202.472%200%205.432-.008%208.313a1.76%201.76%200%200%201-.84%201.46l-6.8%203.927a1.7%201.7%200%200%201-.843.215a1.7%201.7%200%200%201-.844-.215l-6.802-3.927a1.76%201.76%200%200%201-.842-1.46V7.75a.905.905%200%200%201%201.376-.765C7.188%208.381%209.626%209.835%2012%2011.3c2.375-1.443%204.757-2.897%207.115-4.322a.9.9%200%200%201%20.467-.135M5.32%209.355v6.632L12%2019.844l6.682-3.857V9.355l-6.213%203.773a.9.9%200%200%201-.937%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%200c-.655%200-1.31.143-1.807.43l-7.31%204.22c-.99.574-1.806%201.98-1.806%203.129v8.442c0%201.14.813%202.555%201.805%203.128l7.311%204.221c.994.573%202.619.573%203.612%200l7.311-4.22c.994-.574%201.807-1.982%201.807-3.129V7.779c0-1.14-.813-2.555-1.807-3.128L13.806.43C13.308.143%2012.653%200%2011.998%200zm.005%202.606c.29%200%20.577.073.834.209l4.718%202.724l-1.76%201.067L12%204.414L8.21%206.602L6.448%205.534l4.71-2.72c.26-.137.551-.21.847-.208m7.577%204.237a.905.905%200%200%201%20.909.9c-.001%202.472%200%205.432-.008%208.313a1.76%201.76%200%200%201-.84%201.46l-6.8%203.927a1.7%201.7%200%200%201-.843.215a1.7%201.7%200%200%201-.844-.215l-6.802-3.927a1.76%201.76%200%200%201-.842-1.46V7.75a.905.905%200%200%201%201.376-.765C7.188%208.381%209.626%209.835%2012%2011.3c2.375-1.443%204.757-2.897%207.115-4.322a.9.9%200%200%201%20.467-.135M5.32%209.355v6.632L12%2019.844l6.682-3.857V9.355l-6.213%203.773a.9.9%200%200%201-.937%200Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/simple-icons/metro.svg?color=%231a73e8&size=48
