Home/Libraries/OpenMoji (Iconify)/social-distancing

OpenMoji (Iconify)

SocialDistancing

License: CC-BY-SA-4.0

ICON SIZE

STROKE WEIGHT1.5px

COLOR PICKER

Download SVG without fill color (CSS-styleable)

<svg style="color: #818cf8" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 72 72"><g fill="#fcea2b"><path d="M18.322 26.672a3.005 3.005 0 0 0-2.942-2.888h-4.193a3.005 3.005 0 0 0-2.942 2.888l-.553 13.585a.7.7 0 0 1-.085.306l2.05-1.464l-.498 15.469c-.023.22.04.44.175.614a.17.17 0 0 0 .106.063c.15 0 .458-.298.514-.787l2.025-15.727a3.5 3.5 0 0 1 .282-.833l.506-.563h1.136l.688.436c.125.299.208.615.246.937l1.776 15.749c.055.487.365.786.514.786a.17.17 0 0 0 .107-.063c.134-.173.342-.408.319-.629L16.901 39.1l2.446 1.698"/><circle cx="13.339" cy="18.539" r="2.075"/><path d="M63.765 27.136a3.005 3.005 0 0 0-2.942-2.888H56.63a3.005 3.005 0 0 0-2.942 2.888l-.553 13.585a.7.7 0 0 1-.085.306l2.05-1.464l-.498 15.469a.86.86 0 0 0 .174.614a.17.17 0 0 0 .107.063c.15 0 .458-.299.513-.787l2.026-15.727a3.5 3.5 0 0 1 .282-.833l.506-.563h1.136l.688.436q.189.45.246.937l1.776 15.749c.055.487.365.786.515.786a.17.17 0 0 0 .106-.063c.134-.173.342-.409.32-.629l-.652-15.452l2.445 1.698"/><circle cx="58.783" cy="19.003" r="2.075"/></g><g fill="none" stroke="#818cf8" stroke-width="1.5"><circle cx="13.339" cy="18.539" r="2.075" stroke-miterlimit="10"/><path stroke-linecap="round" stroke-linejoin="round" d="m16.81 27.58l1.328 26.558c.038.77-.402 1.398-.979 1.398a1.45 1.45 0 0 1-1.208-1.388L14.175 38.75c-.09-.764-.475-1.389-.86-1.389s-.77.625-.858 1.389l-1.775 15.398a1.45 1.45 0 0 1-1.208 1.388c-.577 0-1.017-.629-.978-1.398l1.327-26.557"/><path stroke-linecap="round" stroke-linejoin="round" d="m7.028 40.16l.553-13.278a3.686 3.686 0 0 1 3.64-3.494h4.194"/><path stroke-linecap="round" stroke-linejoin="round" d="M15.364 23.388a3.686 3.686 0 0 1 3.64 3.494l.553 13.279"/></g><g fill="none" stroke="#818cf8" stroke-width="1.5"><circle cx="58.783" cy="19.003" r="2.075" stroke-miterlimit="10"/><path stroke-linecap="round" stroke-linejoin="round" d="m62.253 28.045l1.328 26.557c.039.769-.402 1.398-.978 1.398a1.45 1.45 0 0 1-1.208-1.389l-1.777-15.397c-.09-.764-.475-1.388-.859-1.388s-.77.624-.859 1.388l-1.774 15.397A1.45 1.45 0 0 1 54.917 56c-.576 0-1.017-.629-.978-1.398l1.328-26.557"/><path stroke-linecap="round" stroke-linejoin="round" d="m52.471 40.625l.554-13.28a3.686 3.686 0 0 1 3.64-3.493h4.193"/><path stroke-linecap="round" stroke-linejoin="round" d="M60.807 23.851a3.686 3.686 0 0 1 3.64 3.495L65 40.625"/></g><path fill="none" stroke="#818cf8" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m40.533 30.204l5.38 5.381h-18.85l5.381-5.434m13.522 5.477l-5.275 5.275m-13.575-5.275l5.24 5.24"/></svg>

Icons in Action

WEB APPLICATION HEADER & NAVIGATION

my-app.com/dashboard

Overview Dashboard

PROGRESS STEPPER

BUTTON UI ACTIONS

SCALABILITY & CLARITY

12px

16px

24px

32px

48px

“

Highly adaptable, clean vectors that scale perfectly across modern UI components, navigation bars, and mobile actions. Perfectly pre-vetted for production deployment.

IconSearch Presets

Frequently Asked Questions

Q.How do I use this icon in my React/Next.js project?

You have two choices: install the official package listed under the "REACT IMPORT" tab (e.g. npm install @iconify/react) and import the icon directly, or copy the complete React Component code from the "STANDALONE JSX" tab and paste it directly into a local file (e.g. SocialDistancingIcon.tsx) to avoid installing any npm packages.

Q.Is this icon free for commercial use?

Yes. This icon is published under the open-source **CC-BY-SA-4.0** license. The license grants full permissions for personal and commercial usage (e.g., in SaaS platforms, client projects, or business landing pages). Attributing the icon creator is generally not required for MIT/ISC licenses, but check details on our dedicated License Guide.

Q.What is the "Download SVG without fill color" toggle?

Many SVGs ship with inline fill="..." attributes. By checking this toggle, we strip these attributes and enforce fill="none", making the SVG fully styleable via CSS classes or Tailwind utility classes like fill-current.