Home/Libraries/OpenMoji (Iconify)/maracas

OpenMoji (Iconify)

Maracas

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="M28.996 24c1.59 1.036 2.71 2.347 3.59 3.834c0 0-.232 3.484-4.43 9.932c-4.208 6.462-7.3 8.084-7.3 8.084c-1.716-.203-3.368-.697-4.958-1.732c-2.028-1.32-3.735-2.91-5.01-4.654c.149-.132 2.76-2.482 6.72-8.566c3.952-6.068 5.046-9.407 5.107-9.596c2.11.46 4.254 1.379 6.281 2.699"/><path fill="#d22f27" d="M22.714 21.302c-.06.19-1.154 3.528-5.106 9.596c-3.96 6.084-6.571 8.434-6.72 8.566c-3.091-4.152-3.773-9.167-.924-13.543s7.702-5.766 12.75-4.619"/><path fill="#f4aa41" d="M42.805 44.044c4.406 2.868 17.5 4.228 12.732 11.551c-4.778 7.338-11.318-4.088-15.724-6.956c-2.713-1.767-5.362-2.453-7.928-2.69c0 0 1.319-1.26 2.98-3.814c1.654-2.538 2.273-4.254 2.273-4.254c1.255 2.251 2.954 4.396 5.667 6.163"/><path fill="#5c9e31" d="M32.587 27.835c1.8 2.978 2.66 6.634 4.55 10.046c0 0-.618 1.716-2.271 4.254c-1.662 2.553-2.981 3.813-2.981 3.813c-3.886-.349-7.577.343-11.03-.098c0 0 3.093-1.622 7.3-8.084c4.199-6.448 4.431-9.932 4.431-9.932Z"/><path fill="#f4aa41" d="M60.434 30.372c-.382 1.643-1.136 2.976-2.111 4.163c0 0-2.98.865-9.641-.682c-6.676-1.551-8.97-3.64-8.97-3.64c-.352-1.496-.441-3.025-.06-4.668c.487-2.095 1.295-4.004 2.365-5.598c.155.084 2.911 1.55 9.196 3.01c6.269 1.456 9.39 1.355 9.566 1.348c.257 1.903.141 3.972-.345 6.067"/><path fill="#d22f27" d="M60.779 24.305c-.177.007-3.297.108-9.566-1.348c-6.285-1.46-9.041-2.926-9.196-3.01c2.528-3.844 6.509-5.937 11.03-4.887s7.156 4.68 7.732 9.245"/><path fill="#f4aa41" d="M47.89 47.995c-1.057 4.551 1.787 15.901-5.779 14.144c-7.58-1.76-.025-10.695 1.032-15.246c.651-2.803.42-5.224-.162-7.44c0 0 1.453.72 4.09 1.332c2.623.609 4.244.604 4.244.604c-1.498 1.733-2.773 3.803-3.424 6.606Z"/><path fill="#5c9e31" d="M58.323 34.535c-1.941 2.409-4.733 4.238-7.008 6.854c0 0-1.621.005-4.243-.604c-2.638-.613-4.09-1.332-4.09-1.332c-.89-3.351-2.59-6.224-3.27-9.24c0 0 2.294 2.089 8.97 3.64c6.66 1.547 9.641.682 9.641.682"/><g fill="none" stroke="#818cf8" stroke-miterlimit="10" stroke-width="1.5"><path d="M9.75 26.08c2.83-4.44 7.72-5.9 12.81-4.81c2.12.45 4.28 1.35 6.34 2.66c1.62 1.03 2.76 2.34 3.67 3.83c3.05 4.95 3.55 11.81 10.48 16.22c.22.14.46.27.71.4m4.84 1.9c5.15 1.82 10.72 3.97 7.39 9.21"/><path d="M37.267 37.836s-.612 1.729-2.256 4.312M32.572 27.76s-.197 3.507-4.365 10.06M22.56 21.267s-1.015 3.376-5.063 9.74M9.75 26.08c-2.83 4.44-2.07 9.49 1.07 13.64c1.31 1.73 3.04 3.31 5.1 4.62c1.62 1.03 3.29 1.51 5.03 1.7c5.78.66 12.2-1.8 19.13 2.61c.61.39 1.26.93 1.94 1.57m5.79 5.59c2.87 2.37 5.78 3.45 8.18-.32"/><path d="M32.063 46.018s1.305-1.287 2.948-3.87m-14.064 3.888s3.092-1.664 7.26-8.217M10.821 39.72s2.628-2.35 6.676-8.714M42.37 61.955c7.547 1.755 4.716-9.555 5.772-14.096c2.126-9.147 10.865-10.486 12.516-17.585s-.977-13.779-7.373-15.266"/><path d="M51.557 41.27s-1.613-.004-4.235-.613m11.224-6.221s-2.966.86-9.618-.687m12.086-9.514s-3.098.143-9.558-1.36m-9.086 39.08c-7.547-1.754-.017-10.656 1.039-15.197c2.126-9.146-5.125-14.203-3.475-21.303s6.955-11.934 13.351-10.447"/><path d="M43.25 39.34s1.45.707 4.072 1.316m-7.329-10.534s2.283 2.08 8.935 3.627M42.279 19.88s2.717 1.494 9.177 2.996"/></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. MaracasIcon.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.