Magic Hat icon

game-icons:magic-hat

The Magic Hat icon (game-icons:magic-hat) is a free SVG icon from the Game Icons set by GameIcons. It is drawn on a 512 × 512 grid. Game Icons are released under the CC BY 3.0 license, which allows use in personal and commercial projects as long as you credit the author. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.

Icon set: Game Icons
Author: GameIcons
License: CC-BY-3.0
Size: 512 × 512
Tags: magichat

Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path fill="currentColor" 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>

How to use the Magic Hat icon

React

import { Icon } from "@iconify/react";

<Icon icon="game-icons:magic-hat" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="game-icons:magic-hat" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="game-icons:magic-hat" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[game-icons--magic-hat]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/game-icons -->
<div class="i-game-icons:magic-hat"></div>

Web component

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="game-icons:magic-hat"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/game-icons/magic-hat.svg" alt="Magic Hat icon" width="24" height="24">

Related icons in Game Icons

Magic Hat icon in other icon sets

Magic Hat icon FAQ

Is the Magic Hat icon free for commercial use?

Yes. Game Icons are released under the CC BY 3.0 license, which allows use in personal and commercial projects as long as you credit the author.

How do I use the Magic Hat icon in React?

Install @iconify/react and render <Icon icon="game-icons:magic-hat" />, or use “Copy code” on this page to get a standalone React component.

How do I add the Magic Hat icon to a web page?

Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/game-icons/magic-hat.svg" alt="Magic Hat icon">, or paste the SVG code inline to style it with CSS.

Browse all Game Icons →