distance icon

distance from Material Symbols Light by Google · Regular · Activities · Apache-2.0 Free for personal and commercial use.

Name: distance
Set: Material Symbols Light
Style: Regular
Category: Activities
Viewbox: 24×24
License: Apache 2.0
Aliases: distance-sharp

3 other variants in Material Symbols Light

distance-outline distance-outline-rounded distance-rounded

The same icon in other sets

distanceMaterial Symbols

More activities icons from Material Symbols Light

Use the distance icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M8.04 20.384q-1.54-.617-1.54-1.596q0-.465.44-.891q.439-.426 1.204-.724l.787.668q-.417.157-.863.417q-.445.26-.557.511q.172.497 1.452.864T12 20q1.737 0 3.03-.367t1.464-.864q-.078-.257-.575-.517t-.938-.417l.78-.673q.835.304 1.287.73q.452.425.452.896q0 .98-1.54 1.596T12 21t-3.96-.616M12 18q-3.025-2.292-4.512-4.454Q6 11.385 6 9.304q0-1.563.541-2.738q.542-1.174 1.407-1.968t1.933-1.196T12 3t2.12.402q1.067.402 1.932 1.196t1.407 1.968T18 9.304q0 2.08-1.487 4.242T12 18m0-7.211q.671 0 1.143-.463t.472-1.153q0-.671-.472-1.143T12 7.558q-.652 0-1.134.472t-.481 1.143q0 .69.481 1.153t1.134.462"/></svg>

React

import type { SVGProps } from "react";

export function MaterialSymbolsLightDistance(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.04 20.384q-1.54-.617-1.54-1.596q0-.465.44-.891q.439-.426 1.204-.724l.787.668q-.417.157-.863.417q-.445.26-.557.511q.172.497 1.452.864T12 20q1.737 0 3.03-.367t1.464-.864q-.078-.257-.575-.517t-.938-.417l.78-.673q.835.304 1.287.73q.452.425.452.896q0 .98-1.54 1.596T12 21t-3.96-.616M12 18q-3.025-2.292-4.512-4.454Q6 11.385 6 9.304q0-1.563.541-2.738q.542-1.174 1.407-1.968t1.933-1.196T12 3t2.12.402q1.067.402 1.932 1.196t1.407 1.968T18 9.304q0 2.08-1.487 4.242T12 18m0-7.211q.671 0 1.143-.463t.472-1.153q0-.671-.472-1.143T12 7.558q-.652 0-1.134.472t-.481 1.143q0 .69.481 1.153t1.134.462"/></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.04 20.384q-1.54-.617-1.54-1.596q0-.465.44-.891q.439-.426 1.204-.724l.787.668q-.417.157-.863.417q-.445.26-.557.511q.172.497 1.452.864T12 20q1.737 0 3.03-.367t1.464-.864q-.078-.257-.575-.517t-.938-.417l.78-.673q.835.304 1.287.73q.452.425.452.896q0 .98-1.54 1.596T12 21t-3.96-.616M12 18q-3.025-2.292-4.512-4.454Q6 11.385 6 9.304q0-1.563.541-2.738q.542-1.174 1.407-1.968t1.933-1.196T12 3t2.12.402q1.067.402 1.932 1.196t1.407 1.968T18 9.304q0 2.08-1.487 4.242T12 18m0-7.211q.671 0 1.143-.463t.472-1.153q0-.671-.472-1.143T12 7.558q-.652 0-1.134.472t-.481 1.143q0 .69.481 1.153t1.134.462"/></svg>
</template>

CSS

.icon-distance {
  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.04%2020.384q-1.54-.617-1.54-1.596q0-.465.44-.891q.439-.426%201.204-.724l.787.668q-.417.157-.863.417q-.445.26-.557.511q.172.497%201.452.864T12%2020q1.737%200%203.03-.367t1.464-.864q-.078-.257-.575-.517t-.938-.417l.78-.673q.835.304%201.287.73q.452.425.452.896q0%20.98-1.54%201.596T12%2021t-3.96-.616M12%2018q-3.025-2.292-4.512-4.454Q6%2011.385%206%209.304q0-1.563.541-2.738q.542-1.174%201.407-1.968t1.933-1.196T12%203t2.12.402q1.067.402%201.932%201.196t1.407%201.968T18%209.304q0%202.08-1.487%204.242T12%2018m0-7.211q.671%200%201.143-.463t.472-1.153q0-.671-.472-1.143T12%207.558q-.652%200-1.134.472t-.481%201.143q0%20.69.481%201.153t1.134.462%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.04%2020.384q-1.54-.617-1.54-1.596q0-.465.44-.891q.439-.426%201.204-.724l.787.668q-.417.157-.863.417q-.445.26-.557.511q.172.497%201.452.864T12%2020q1.737%200%203.03-.367t1.464-.864q-.078-.257-.575-.517t-.938-.417l.78-.673q.835.304%201.287.73q.452.425.452.896q0%20.98-1.54%201.596T12%2021t-3.96-.616M12%2018q-3.025-2.292-4.512-4.454Q6%2011.385%206%209.304q0-1.563.541-2.738q.542-1.174%201.407-1.968t1.933-1.196T12%203t2.12.402q1.067.402%201.932%201.196t1.407%201.968T18%209.304q0%202.08-1.487%204.242T12%2018m0-7.211q.671%200%201.143-.463t.472-1.153q0-.671-.472-1.143T12%207.558q-.652%200-1.134.472t-.481%201.143q0%20.69.481%201.153t1.134.462%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols-light/distance.svg?color=%231a73e8&size=48