social distance icon

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

Name: social-distance
Set: Material Symbols Light
Style: Regular
Category: Social
Viewbox: 24×24
License: Apache 2.0
Aliases: social-distance-outline, social-distance-outline-sharp, social-distance-sharp

1 other variant in Material Symbols Light

social-distance-rounded

The same icon in other sets

social-distanceMaterial Symbols

More social icons from Material Symbols Light

Use the social distance icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m6.192 19.904l-3.288-3.288l3.288-3.289l.689.689l-2.1 2.1h14.438l-2.1-2.1l.689-.689l3.288 3.289l-3.288 3.288l-.689-.688l2.1-2.1H4.781l2.1 2.1zM2.77 10.5v-.171q0-.427.248-.764q.248-.336.67-.528q.592-.276 1.241-.406Q5.578 8.5 6.27 8.5t1.341.13t1.242.407q.421.192.67.528q.247.337.247.764v.171zm11.462 0v-.171q0-.427.248-.764q.248-.336.669-.528q.593-.276 1.242-.406t1.34-.131t1.342.13q.65.132 1.241.407q.421.192.67.528q.248.337.248.764v.171zM6.269 6.885q-.632 0-1.066-.434t-.434-1.066t.434-1.067t1.066-.433t1.067.433t.433 1.067t-.433 1.066t-1.067.434m11.462 0q-.633 0-1.067-.434t-.433-1.066t.433-1.067t1.067-.433t1.066.433t.434 1.067t-.434 1.066t-1.066.434"/></svg>

React

import type { SVGProps } from "react";

export function MaterialSymbolsLightSocialDistance(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="m6.192 19.904l-3.288-3.288l3.288-3.289l.689.689l-2.1 2.1h14.438l-2.1-2.1l.689-.689l3.288 3.289l-3.288 3.288l-.689-.688l2.1-2.1H4.781l2.1 2.1zM2.77 10.5v-.171q0-.427.248-.764q.248-.336.67-.528q.592-.276 1.241-.406Q5.578 8.5 6.27 8.5t1.341.13t1.242.407q.421.192.67.528q.247.337.247.764v.171zm11.462 0v-.171q0-.427.248-.764q.248-.336.669-.528q.593-.276 1.242-.406t1.34-.131t1.342.13q.65.132 1.241.407q.421.192.67.528q.248.337.248.764v.171zM6.269 6.885q-.632 0-1.066-.434t-.434-1.066t.434-1.067t1.066-.433t1.067.433t.433 1.067t-.433 1.066t-1.067.434m11.462 0q-.633 0-1.067-.434t-.433-1.066t.433-1.067t1.067-.433t1.066.433t.434 1.067t-.434 1.066t-1.066.434"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m6.192 19.904l-3.288-3.288l3.288-3.289l.689.689l-2.1 2.1h14.438l-2.1-2.1l.689-.689l3.288 3.289l-3.288 3.288l-.689-.688l2.1-2.1H4.781l2.1 2.1zM2.77 10.5v-.171q0-.427.248-.764q.248-.336.67-.528q.592-.276 1.241-.406Q5.578 8.5 6.27 8.5t1.341.13t1.242.407q.421.192.67.528q.247.337.247.764v.171zm11.462 0v-.171q0-.427.248-.764q.248-.336.669-.528q.593-.276 1.242-.406t1.34-.131t1.342.13q.65.132 1.241.407q.421.192.67.528q.248.337.248.764v.171zM6.269 6.885q-.632 0-1.066-.434t-.434-1.066t.434-1.067t1.066-.433t1.067.433t.433 1.067t-.433 1.066t-1.067.434m11.462 0q-.633 0-1.067-.434t-.433-1.066t.433-1.067t1.067-.433t1.066.433t.434 1.067t-.434 1.066t-1.066.434"/></svg>
</template>

CSS

.icon-social-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%22m6.192%2019.904l-3.288-3.288l3.288-3.289l.689.689l-2.1%202.1h14.438l-2.1-2.1l.689-.689l3.288%203.289l-3.288%203.288l-.689-.688l2.1-2.1H4.781l2.1%202.1zM2.77%2010.5v-.171q0-.427.248-.764q.248-.336.67-.528q.592-.276%201.241-.406Q5.578%208.5%206.27%208.5t1.341.13t1.242.407q.421.192.67.528q.247.337.247.764v.171zm11.462%200v-.171q0-.427.248-.764q.248-.336.669-.528q.593-.276%201.242-.406t1.34-.131t1.342.13q.65.132%201.241.407q.421.192.67.528q.248.337.248.764v.171zM6.269%206.885q-.632%200-1.066-.434t-.434-1.066t.434-1.067t1.066-.433t1.067.433t.433%201.067t-.433%201.066t-1.067.434m11.462%200q-.633%200-1.067-.434t-.433-1.066t.433-1.067t1.067-.433t1.066.433t.434%201.067t-.434%201.066t-1.066.434%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%22m6.192%2019.904l-3.288-3.288l3.288-3.289l.689.689l-2.1%202.1h14.438l-2.1-2.1l.689-.689l3.288%203.289l-3.288%203.288l-.689-.688l2.1-2.1H4.781l2.1%202.1zM2.77%2010.5v-.171q0-.427.248-.764q.248-.336.67-.528q.592-.276%201.241-.406Q5.578%208.5%206.27%208.5t1.341.13t1.242.407q.421.192.67.528q.247.337.247.764v.171zm11.462%200v-.171q0-.427.248-.764q.248-.336.669-.528q.593-.276%201.242-.406t1.34-.131t1.342.13q.65.132%201.241.407q.421.192.67.528q.248.337.248.764v.171zM6.269%206.885q-.632%200-1.066-.434t-.434-1.066t.434-1.067t1.066-.433t1.067.433t.433%201.067t-.433%201.066t-1.067.434m11.462%200q-.633%200-1.067-.434t-.433-1.066t.433-1.067t1.067-.433t1.066.433t.434%201.067t-.434%201.066t-1.066.434%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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