Straw Hat icon
icon-park:straw-hat
The Straw Hat icon (icon-park:straw-hat) is a free SVG icon from the IconPark set by ByteDance. It is drawn on a 48 × 48 grid. IconPark icons are released under the Apache 2.0 license, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.
- Icon set
- IconPark
- Author
- ByteDance
- License
- Apache-2.0
- Size
- 48 × 48
- Category
- Clothes
- Tags
- strawhat
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><g fill="none" stroke="#000" stroke-width="4"><path d="M34 22C34 16.4772 29.5228 12 24 12C18.4772 12 14 16.4772 14 22"/><path d="M14 23C8.02199 24.2044 4 26.4557 4 29.034C4 32.8812 12.9543 36 24 36C35.0457 36 44 32.8812 44 29.034C44 26.4557 39.978 24.2044 34 23"/><path stroke-linecap="round" stroke-linejoin="round" d="M14 22C15 22.8333 18 26 24 26C30 26 33 23 34 22"/><path stroke-linecap="round" stroke-linejoin="round" d="M19 25L21 20"/></g></svg>How to use the Straw Hat icon
React
import { Icon } from "@iconify/react";
<Icon icon="icon-park:straw-hat" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="icon-park:straw-hat" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="icon-park:straw-hat" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[icon-park--straw-hat]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/icon-park -->
<div class="i-icon-park:straw-hat"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="icon-park:straw-hat"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/icon-park/straw-hat.svg" alt="Straw Hat icon" width="24" height="24">Straw Hat icon in other icon sets
Straw Hat icon FAQ
Is the Straw Hat icon free for commercial use?
Yes. IconPark icons are released under the Apache 2.0 license, which allows use in personal and commercial projects.
How do I use the Straw Hat icon in React?
Install @iconify/react and render <Icon icon="icon-park:straw-hat" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Straw Hat icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/icon-park/straw-hat.svg" alt="Straw Hat icon">, or paste the SVG code inline to style it with CSS.