Home/Libraries/OpenMoji (Iconify)/mate

OpenMoji (Iconify)

Mate

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"><path fill="#f4aa41" d="M47.683 65.85a5.35 5.35 0 0 0 2.865-.843C57.288 60.72 61.68 54.572 61.68 45.87c0-2.31-1.708-4.146-2.528-6.203a6 6 0 0 0-.524-1.072L55.2 33.257a5.26 5.26 0 0 0-4.509-2.417L24 31.263a4.94 4.94 0 0 0-4.022 2.186l-1.267 1.89a8.6 8.6 0 0 0-.845 1.574c-1.128 2.803-4.656 9.07-4.656 11.378c0 8.725 3.173 12.747 9.786 16.773a5.34 5.34 0 0 0 2.772.787z"/><path fill="#e27022" d="m58.9 39.03l-5.066-7.885a.76.76 0 0 0-.635-.347h-4.424a.755.755 0 0 0-.672 1.1l1.514 2.951a16 16 0 0 1 1.351 3.691c.292 1.257.64 2.766.77 3.35a23 23 0 0 1 .513 6.112c-.467 5.59-2.793 13.41-10.17 17.74a.8.8 0 0 1-.397.108h11.26c.14 0 .279-.038.4-.109c7.348-4.324 8.008-11.64 8.008-20.86c0-2.489-1.662-3.466-2.372-5.698a.7.7 0 0 0-.074-.16z"/><path fill="#9b9b9a" d="M21.81 24.04h31.36v6.114H21.81z"/><path fill="none" stroke="#818cf8" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m39.4 19.67l2.467-6.773c1.23-3.378 3.565-5.473 6.098-5.473h9.577"/><g fill="none" stroke="#818cf8" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M37.2 30.8h16.42s8.005 10.28 8.211 16.97c.19 6.208-2.786 14.34-9.316 18.08h-29.99c-6.53-3.74-9.507-11.88-9.316-18.08c.206-6.694 8.211-16.97 8.211-16.97h16.42m-.3-11.3l2.766-7.63c1.379-3.805 3.996-6.165 6.836-6.165h10.4"/><path d="M21.42 30.8v-7.3h32.2v7.3"/></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. MateIcon.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.