Home/Libraries/Game Icons (Iconify)/magic-hat

Game Icons (Iconify)

MagicHat

License: CC-BY-3.0

ICON SIZE

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 512 512"><path fill="#818cf8" d="M167.549 17.846c-3.562-.026-7.259.705-10.854 2.134c-4.878 1.94-9.373 5.046-12.656 9.532c6.996 2.376 13.264 6.947 18.467 12.582c8.439 9.138 15.107 21.278 20.994 34.76c11.774 26.963 20.186 59.569 26.89 82.855l-17.294 10.98c-6.823-23.696-15.204-61.701-26.09-86.632c-5.443-12.466-11.573-23.093-17.723-29.752c-3.773-4.086-7.169-6.584-10.59-7.766c-.062 2.855.173 5.946.768 9.297l34.45 132.986l11.11-7.549c-15.51 20.854-22.763 48.394-17.09 76.33c4.77 1.78 12.532 3.724 22.05 5.254a24.6 24.6 0 0 1-.979-6.857c0-13.7 11.298-24.998 24.998-24.998S238.998 242.3 238.998 256c0 3.823-.881 7.457-2.447 10.713c5.974.184 12.04.289 18.129.289c6.945 0 13.898-.13 20.732-.37a24.65 24.65 0 0 1-2.41-10.632c0-13.7 11.298-24.998 24.998-24.998S322.998 242.3 322.998 256c0 2.276-.318 4.483-.9 6.586c9.232-1.493 16.887-3.333 21.996-5.149c5.657-28.281-2.24-56.193-18.543-77.134l12.539 8.52l34.45-132.987c.594-3.35.829-6.442.767-9.297c-3.421 1.182-6.817 3.68-10.59 7.766c-6.15 6.66-12.28 17.286-17.723 29.752c-10.886 24.931-19.267 62.936-26.09 86.632l-17.295-10.98c6.705-23.286 15.117-55.892 26.891-82.855c5.887-13.482 12.555-25.622 20.994-34.76c5.203-5.635 11.471-10.206 18.467-12.582c-3.283-4.486-7.778-7.591-12.656-9.532c-11.504-4.575-24.05-1.999-29.881 9.663l-.291.582l-.371.533c-6.573 9.448-13.422 29.492-19.54 51.847c-6.116 22.356-11.916 47.202-18.656 68.15L278 148l.121.082a85.3 85.3 0 0 0-22.758-3.084c-6.244 0-12.31.69-18.156 1.97l-11.773 3.788c-6.74-20.949-12.54-45.795-18.657-68.15s-12.966-42.4-19.539-51.848l-.37-.533l-.292-.582c-4.008-8.018-11.191-11.74-19.027-11.797m-11.494 173.812c-25.225 3.524-47.994 8.295-67.174 14.049c-21.113 6.334-37.932 13.888-48.815 21.607c-10.882 7.72-15.068 14.798-15.068 20.686s4.186 12.967 15.068 20.686s27.702 15.273 48.815 21.607C131.106 302.96 190.455 311.002 256 311.002s124.894-8.042 167.12-20.709c21.112-6.334 37.93-13.888 48.814-21.607c10.882-7.72 15.068-14.798 15.068-20.686s-4.186-12.967-15.068-20.686s-27.702-15.273-48.815-21.607c-19.18-5.754-41.95-10.525-67.174-14.049l-.898 3.469a114 114 0 0 1 4.762 13.492c40.753 7.985 64.6 20.218 64.677 33.178c-.066 16.233-37.3 31.018-95.76 38.025c-4.76.796-9.805 1.495-15.185 2.117c-17.736 2.054-38.345 3.06-58.861 3.06c-20.517 0-40.905-1.006-58.225-3.063c-6.741-.801-12.947-1.686-18.596-2.784c-55.497-7.277-90.295-21.665-90.345-37.355c.017-12.953 23.78-25.186 64.457-33.184a115 115 0 0 1 4.857-13.967zm-23.526 127.23l-2.172 30.42c80.14 19.168 162.952 22.654 251.286.005l-2.172-30.424c-36.348 6.451-78.462 10.11-123.471 10.11s-87.123-3.659-123.47-10.11zm-3.47 48.6l-7.95 111.293c.94.75 3.18 2.056 6.47 3.309c6.764 2.577 17.598 5.06 30.74 7.008c26.282 3.893 62.014 5.904 97.681 5.904s71.399-2.01 97.682-5.904c13.141-1.947 23.975-4.431 30.74-7.008c3.29-1.253 5.528-2.559 6.469-3.309l-7.946-111.248c-89.153 22.279-173.317 18.837-253.886-.045"/></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. MagicHatIcon.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-3.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.