Show Hat Magician icon

streamline-freehand:show-hat-magician

The Show Hat Magician icon (streamline-freehand:show-hat-magician) is a free SVG icon from the Freehand free icons set by Streamline. It is drawn on a 24 × 24 grid. Freehand free icons are released under the CC BY 4.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: Freehand free icons
Author: Streamline
License: CC-BY-4.0
Size: 24 × 24
Category: MusicVideoEntertainment
Tags: showhat, hatmagician, showhatmagician

Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"><path d="M23.856 19.082c-1.914-1.635-3.818-3.33-5.733-4.985a99 99 0 0 0-1.904-1.665c-.638-.548-1.286-1.086-1.914-1.655a59 59 0 0 1-2.313-2.153a.28.28 0 0 0-.409 0a.29.29 0 0 0 0 .409c1.206 1.405 2.473 2.791 3.819 4.087a39 39 0 0 0 1.774 1.615c.609.519 1.217.997 1.845 1.526c1.455 1.166 2.99 2.273 4.436 3.38a.334.334 0 0 0 .541-.295a.33.33 0 0 0-.122-.224zM7.485 3.48l.638.189c.06.458.15.907.22 1.366a.34.34 0 0 0 .349.319a.35.35 0 0 0 .329-.35c0-.408.07-.817.1-1.226h.259c.339 0 .658-.12.997-.17a.33.33 0 0 0 .339-.318a.33.33 0 0 0-.32-.35c-.338-.079-.657-.159-.996-.209h-.23v-.588C9.11 1.615 9 1.146 8.921.588a.29.29 0 1 0-.578 0c-.09.528-.19.997-.24 1.575v.658l-.508.1a.29.29 0 0 0-.309.27a.31.31 0 0 0 .2.288m7.796 4.816l.778.12l.18.817a.339.339 0 0 0 .667 0c0-.27.07-.529.1-.798h.08c.329-.06.638-.16.997-.229a.33.33 0 0 0 .319-.339a.34.34 0 0 0-.41-.379c-.338 0-.657-.12-.996-.15c-.34-.03 0-.11 0-.169c-.07-.379-.19-.708-.29-1.077a.3.3 0 0 0-.587 0c-.06.37-.15.718-.19 1.097a2 2 0 0 0 0 .24c-.24.07-.478.159-.728.249a.3.3 0 0 0-.2.319a.29.29 0 0 0 .28.299M5.86 16.969c-.997-.499-1.794-.997-2.751-1.536c-.34-.23-.559.19-.38.648a26 26 0 0 0 2.523 1.775q.677.407 1.396.738q.723.332 1.485.558a10.8 10.8 0 0 0 3.061.459c.409 0 .549-.579.19-.708a12.7 12.7 0 0 1-3.36-.937c-.738-.34-1.456-.678-2.164-.997"/><path d="M14.913 16.6a.34.34 0 0 0-.449-.15c-.4.153-.835.19-1.256.11a12 12 0 0 1-2.074-.588a26.2 26.2 0 0 1-4.825-2.204a16 16 0 0 1-4.088-3.23a8 8 0 0 1-.468-.548a5 5 0 0 1-.36-.579a2.7 2.7 0 0 1-.219-.488a3 3 0 0 1-.13-.529c-.089-.737.13-1.166.55-1.385a6.1 6.1 0 0 1 2.99-.17c.29 0 .578.08.858.13c.438.09.857.2 1.296.319a.3.3 0 1 0 .17-.569a24 24 0 0 0-1.317-.378a9 9 0 0 0-.917-.19a6.83 6.83 0 0 0-3.45.06A1.994 1.994 0 0 0 .048 8.484q.03.364.12.718q.098.35.259.678c.1.21.219.399.339.598c.12.2.398.529.608.778q.729.795 1.565 1.475c-.16.529-.329.997-.538 1.546q-.377.9-.868 1.744q-.551.676-.997 1.426a1.67 1.67 0 0 0-.08.997a5.04 5.04 0 0 0 2.224 2.991a16.2 16.2 0 0 0 4.965 1.914c.773.198 1.565.315 2.363.35c.44.023.874-.1 1.236-.35c.284-.27.485-.616.578-.997a8.3 8.3 0 0 0 .19-1.395q.085-.886.279-1.755q.2-.867.548-1.685a.4.4 0 0 0 0-.26q.135.015.27 0a2.9 2.9 0 0 0 1.635-.219a.34.34 0 0 0 .17-.438m-2.672.618a30 30 0 0 0-.997 3.61q-.07.64-.23 1.265c-.066.21-.186.4-.348.549c-.17.14-.519.09-.897 0a11 11 0 0 1-1.805-.39a16.3 16.3 0 0 1-4.596-1.814a4.18 4.18 0 0 1-1.904-2.303a.8.8 0 0 1 .08-.588c.199-.419.548-.798.747-1.196c.09-.18.708-1.626.798-1.885c.16-.448.279-.907.398-1.366a20 20 0 0 0 2.294 1.576a25.2 25.2 0 0 0 5.114 2.063c.409.12.907.28 1.426.39a.3.3 0 0 0-.08.089"/><path d="M7.545 9.381a.29.29 0 1 0 0-.578a4.2 4.2 0 0 0-1.764 0c-.46.19-.748.588-.45 1.446q.066.196.16.379q.106.188.24.359q.164.218.359.408q.195.18.418.33c.744.49 1.544.888 2.383 1.186c1.243.41 2.527.68 3.829.807a.33.33 0 0 0 .379-.279a.33.33 0 0 0-.27-.379a19.6 19.6 0 0 1-2.99-.897c-.48-.19-.998-.399-1.396-.628a10.5 10.5 0 0 1-1.326-.718l-.609-.488l-.319-.44c-.08-.149-.17-.238-.11-.308a.42.42 0 0 1 .23-.13a5.3 5.3 0 0 1 1.236-.07"/></g></svg>

How to use the Show Hat Magician icon

React

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

<Icon icon="streamline-freehand:show-hat-magician" width="24" />

Vue

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

<template>
  <Icon icon="streamline-freehand:show-hat-magician" width="24" />
</template>

Svelte

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

<Icon icon="streamline-freehand:show-hat-magician" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[streamline-freehand--show-hat-magician]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/streamline-freehand -->
<div class="i-streamline-freehand:show-hat-magician"></div>

Web component

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

<iconify-icon icon="streamline-freehand:show-hat-magician"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/streamline-freehand/show-hat-magician.svg" alt="Show Hat Magician icon" width="24" height="24">

Related icons in Freehand free icons

Show Hat Magician icon FAQ

Is the Show Hat Magician icon free for commercial use?

Yes. Freehand free icons are released under the CC BY 4.0 license, which allows use in personal and commercial projects as long as you credit the author.

How do I use the Show Hat Magician icon in React?

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

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

Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/streamline-freehand/show-hat-magician.svg" alt="Show Hat Magician icon">, or paste the SVG code inline to style it with CSS.

Browse all Freehand free icons →