map distance icon
map-distance-filled from TDesign Icons by TDesign · Filled · MIT Free for personal and commercial use.
- Name
- map-distance-filled
- Set
- TDesign Icons
- Style
- Filled
- Viewbox
- 24×24
- License
- MIT
1 other variant in TDesign Icons
The same icon in other sets
Related icons in TDesign Icons
Use the map distance icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M16 7.5a.5.5 0 0 1 1 0c0 .222-.157.545-.488.907l-.012.013l-.012-.013C16.158 8.045 16 7.722 16 7.5m-8 3a.5.5 0 0 1 1 0c0 .222-.157.545-.488.907l-.012.013l-.012-.013C8.158 11.045 8 10.722 8 10.5"/><path fill="currentColor" d="M22 2v20H2V2zm-5.687 8.836l.187.128l.188-.128c.232-.158.465-.316.682-.494c.167-.137.391-.337.618-.585C18.408 9.298 19 8.497 19 7.5a2.5 2.5 0 1 0-5 0c0 .997.593 1.798 1.012 2.257c.228.248.452.448.618.585c.217.178.45.336.683.494m-8.011 2.993l.198.135l.199-.135c.156-.106.313-.211.463-.324q.08-.059.208-.163c.167-.137.391-.337.618-.585c.42-.459 1.012-1.26 1.012-2.257a2.5 2.5 0 1 0-5 0c0 .997.593 1.798 1.012 2.257a6 6 0 0 0 .826.748c.151.113.308.218.464.324m5.613 1.958l5.873-2.202l-.703-1.873l-5.872 2.203zm-8 3l5.873-2.202l-.703-1.873l-5.872 2.203z"/></svg>
React
import type { SVGProps } from "react";
export function TdesignMapDistanceFilled(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="M16 7.5a.5.5 0 0 1 1 0c0 .222-.157.545-.488.907l-.012.013l-.012-.013C16.158 8.045 16 7.722 16 7.5m-8 3a.5.5 0 0 1 1 0c0 .222-.157.545-.488.907l-.012.013l-.012-.013C8.158 11.045 8 10.722 8 10.5"/><path fill="currentColor" d="M22 2v20H2V2zm-5.687 8.836l.187.128l.188-.128c.232-.158.465-.316.682-.494c.167-.137.391-.337.618-.585C18.408 9.298 19 8.497 19 7.5a2.5 2.5 0 1 0-5 0c0 .997.593 1.798 1.012 2.257c.228.248.452.448.618.585c.217.178.45.336.683.494m-8.011 2.993l.198.135l.199-.135c.156-.106.313-.211.463-.324q.08-.059.208-.163c.167-.137.391-.337.618-.585c.42-.459 1.012-1.26 1.012-2.257a2.5 2.5 0 1 0-5 0c0 .997.593 1.798 1.012 2.257a6 6 0 0 0 .826.748c.151.113.308.218.464.324m5.613 1.958l5.873-2.202l-.703-1.873l-5.872 2.203zm-8 3l5.873-2.202l-.703-1.873l-5.872 2.203z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M16 7.5a.5.5 0 0 1 1 0c0 .222-.157.545-.488.907l-.012.013l-.012-.013C16.158 8.045 16 7.722 16 7.5m-8 3a.5.5 0 0 1 1 0c0 .222-.157.545-.488.907l-.012.013l-.012-.013C8.158 11.045 8 10.722 8 10.5"/><path fill="currentColor" d="M22 2v20H2V2zm-5.687 8.836l.187.128l.188-.128c.232-.158.465-.316.682-.494c.167-.137.391-.337.618-.585C18.408 9.298 19 8.497 19 7.5a2.5 2.5 0 1 0-5 0c0 .997.593 1.798 1.012 2.257c.228.248.452.448.618.585c.217.178.45.336.683.494m-8.011 2.993l.198.135l.199-.135c.156-.106.313-.211.463-.324q.08-.059.208-.163c.167-.137.391-.337.618-.585c.42-.459 1.012-1.26 1.012-2.257a2.5 2.5 0 1 0-5 0c0 .997.593 1.798 1.012 2.257a6 6 0 0 0 .826.748c.151.113.308.218.464.324m5.613 1.958l5.873-2.202l-.703-1.873l-5.872 2.203zm-8 3l5.873-2.202l-.703-1.873l-5.872 2.203z"/></svg> </template>
CSS
.icon-map-distance-filled {
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%22M16%207.5a.5.5%200%200%201%201%200c0%20.222-.157.545-.488.907l-.012.013l-.012-.013C16.158%208.045%2016%207.722%2016%207.5m-8%203a.5.5%200%200%201%201%200c0%20.222-.157.545-.488.907l-.012.013l-.012-.013C8.158%2011.045%208%2010.722%208%2010.5%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M22%202v20H2V2zm-5.687%208.836l.187.128l.188-.128c.232-.158.465-.316.682-.494c.167-.137.391-.337.618-.585C18.408%209.298%2019%208.497%2019%207.5a2.5%202.5%200%201%200-5%200c0%20.997.593%201.798%201.012%202.257c.228.248.452.448.618.585c.217.178.45.336.683.494m-8.011%202.993l.198.135l.199-.135c.156-.106.313-.211.463-.324q.08-.059.208-.163c.167-.137.391-.337.618-.585c.42-.459%201.012-1.26%201.012-2.257a2.5%202.5%200%201%200-5%200c0%20.997.593%201.798%201.012%202.257a6%206%200%200%200%20.826.748c.151.113.308.218.464.324m5.613%201.958l5.873-2.202l-.703-1.873l-5.872%202.203zm-8%203l5.873-2.202l-.703-1.873l-5.872%202.203z%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%22M16%207.5a.5.5%200%200%201%201%200c0%20.222-.157.545-.488.907l-.012.013l-.012-.013C16.158%208.045%2016%207.722%2016%207.5m-8%203a.5.5%200%200%201%201%200c0%20.222-.157.545-.488.907l-.012.013l-.012-.013C8.158%2011.045%208%2010.722%208%2010.5%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M22%202v20H2V2zm-5.687%208.836l.187.128l.188-.128c.232-.158.465-.316.682-.494c.167-.137.391-.337.618-.585C18.408%209.298%2019%208.497%2019%207.5a2.5%202.5%200%201%200-5%200c0%20.997.593%201.798%201.012%202.257c.228.248.452.448.618.585c.217.178.45.336.683.494m-8.011%202.993l.198.135l.199-.135c.156-.106.313-.211.463-.324q.08-.059.208-.163c.167-.137.391-.337.618-.585c.42-.459%201.012-1.26%201.012-2.257a2.5%202.5%200%201%200-5%200c0%20.997.593%201.798%201.012%202.257a6%206%200%200%200%20.826.748c.151.113.308.218.464.324m5.613%201.958l5.873-2.202l-.703-1.873l-5.872%202.203zm-8%203l5.873-2.202l-.703-1.873l-5.872%202.203z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/tdesign/map-distance-filled.svg?color=%231a73e8&size=48
