Home/Libraries/OpenMoji (Iconify)/svg

OpenMoji (Iconify)

Svg

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"><defs><path id="SVGoKD6HdOR" d="M53.404 44.132a5.556 5.556 0 0 0-9.242 4.157v4.444a5.556 5.556 0 0 0 11.11 0V50.48h-4.444m-10.741-7.748L35.643 58.29L31.2 42.732m-4.81 3.101c-.455-1.772-2.423-3.102-4.781-3.102c-2.696 0-4.88 1.739-4.88 3.886c0 2.145 2.184 3.886 4.88 3.886l-.1.013c2.696 0 4.881 1.741 4.881 3.886c0 2.148-2.185 3.886-4.88 3.886c-2.36 0-4.327-1.332-4.782-3.104"/></defs><g stroke="#818cf8"><g stroke-width="1.5" transform="translate(-134.7 18.68)scale(.8851)"><path stroke-linecap="round" stroke-linejoin="round" d="M192.9-2.429v22m15.6-15.556l-15.6 15.56m22-.005h-44m22 0L177.3 4.01"/><ellipse cx="192.9" cy="-3.328" rx=".87" ry=".899"/><ellipse cx="150.2" cy="-145.5" rx=".87" ry=".899" transform="rotate(45)"/><ellipse cx="19.57" cy="-170" rx=".87" ry=".899" transform="rotate(90)"/><ellipse cx="19.57" cy="-215.8" rx=".87" ry=".899" transform="rotate(90)"/><ellipse cx="-122.6" cy="-127.3" rx=".87" ry=".899" transform="rotate(135)"/></g><use href="#SVGoKD6HdOR" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5" clip-rule="evenodd"/></g><g transform="translate(4.97 4.974)scale(.8621)"><g class="UnoptimicedTransforms" transform="translate(-134.7 -44.62)scale(.8851)"><path stroke="#818cf8" stroke-linejoin="round" stroke-width="1.5" d="m192.9 69.08l-.04 22.01" class="UnoptimicedTransforms"/><path d="m170.9 82.08l-.002 9h44v-9z" color="#000"/><path d="M160.027 91.09c0-5.435 4.432-9.841 9.9-9.841s9.902 4.406 9.902 9.841zm45.753 0c0-5.435 4.432-9.841 9.9-9.841s9.902 4.406 9.902 9.841z" class="UnoptimicedTransforms"/><circle cx="176.7" cy="74.88" r="9.83"/><circle cx="209.1" cy="74.88" r="9.83"/><circle cx="192.9" cy="68.19" r="9.83"/><rect width="22.56" height="3.551" x="182.1" y="80.08" rx="3.482" ry="3.482"/></g><g fill="#f1b31c" stroke="#818cf8" stroke-width="1.5" transform="translate(-134.7 18.68)scale(.8851)"><path stroke-linecap="round" stroke-linejoin="round" d="M192.9-2.429V41.57m15.6-37.555L177.3 35.13m37.6-15.56h-44m37.6 15.56L177.3 4.015"/><ellipse cx="192.9" cy="42.47" rx=".87" ry=".899"/><ellipse cx="192.9" cy="-3.328" rx=".87" ry=".899"/><ellipse cx="150.2" cy="-99.67" rx=".87" ry=".899" transform="rotate(45)"/><ellipse cx="150.2" cy="-145.5" rx=".87" ry=".899" transform="rotate(45)"/><ellipse cx="19.57" cy="-170" rx=".87" ry=".899" transform="rotate(90)"/><ellipse cx="19.57" cy="-215.8" rx=".87" ry=".899" transform="rotate(90)"/><ellipse cx="-122.6" cy="-127.3" rx=".87" ry=".899" transform="rotate(135)"/><ellipse cx="-122.6" cy="-173.1" rx=".87" ry=".899" transform="rotate(135)"/></g><ellipse cx="56.43" cy="35.93" fill="#f1b31c" rx="4.206" ry="4.238"/><ellipse cx="15.64" cy="35.93" fill="#f1b31c" rx="4.206" ry="4.238"/><rect width="58.1" height="29.02" x="6.95" y="36" rx="4.698" ry="5"/><rect width="56.94" height="12.72" x="7.524" y="35.99" stroke="#818cf8" stroke-linecap="square" stroke-width="1.5" rx="0" ry="0"/><use href="#SVGoKD6HdOR" fill="none" stroke="#818cf8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5" clip-rule="evenodd"/><ellipse cx="21.61" cy="21.56" fill="#818cf8" rx="4.206" ry="4.238"/><ellipse cx="36.04" cy="15.42" fill="#818cf8" rx="4.206" ry="4.238"/><ellipse cx="50.46" cy="21.56" fill="#818cf8" rx="4.206" ry="4.238"/></g></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. SvgIcon.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.