Four icon
icon-park:four
The Four icon (icon-park:four) 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
- Hands
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="#2F88FF" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M13 40L8 25.5L6.04155 15.7078C6.01392 15.5696 6 15.429 6 15.2881V15.1272C6 13.757 7.78238 13.226 8.53225 14.3729C8.5876 14.4575 8.63666 14.5461 8.67904 14.6379L12.6107 23.1566C12.8302 23.6321 13.3794 23.8577 13.8698 23.6738L14 23.625L12.1291 9.94424C12.0464 9.33927 12.2055 8.72606 12.5718 8.23757C13.0844 7.55408 14.0541 7.41556 14.7376 7.92818L14.8707 8.02802C15.2808 8.33563 15.5896 8.75888 15.7573 9.24336L19.869 21.1217C19.9474 21.3481 20.1607 21.5 20.4003 21.5C20.7251 21.5 20.9823 21.2257 20.9614 20.9016L20.0785 7.21729C20.0286 6.44352 20.3143 5.68573 20.8625 5.13746C21.5101 4.4899 22.541 4.43281 23.2561 5.00489L23.5966 5.27727C24.178 5.74239 24.5657 6.40711 24.6842 7.14218L26.9229 21.0222C26.9673 21.2976 27.2051 21.5 27.484 21.5C27.7767 21.5 28.0215 21.2777 28.0497 20.9864L29.3779 7.26175C29.456 6.45511 29.857 5.71437 30.4899 5.20811L30.6963 5.04293C31.4385 4.44919 32.5084 4.50844 33.1805 5.18051C33.7052 5.70522 34 6.41688 34 7.15893V19.9113C34 19.9703 34.005 20.0284 34.0175 20.086C34.1291 20.6002 34.8074 23.2691 37 24C37.9074 24.3025 39.3638 26.8008 40.3729 28.7274C41.113 30.1406 41.042 31.8243 40.2673 33.2189L36.5 40C36.5 40 33 44 25 44C17 44 13.6667 41.3333 13 40Z"/></svg>
How to use the Four icon
React
import { Icon } from "@iconify/react";
<Icon icon="icon-park:four" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="icon-park:four" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="icon-park:four" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[icon-park--four]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/icon-park -->
<div class="i-icon-park:four"></div>
Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="icon-park:four"></iconify-icon>
HTML image
<img src="https://iconyz.com/api/public/svg/icon-park/four.svg" alt="Four icon" width="24" height="24">
Related icons in IconPark
Four icon in other icon sets
Four icon FAQ
Is the Four 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 Four icon in React?
Install @iconify/react and render <Icon icon="icon-park:four" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Four icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/icon-park/four.svg" alt="Four icon">, or paste the SVG code inline to style it with CSS.
Browse all IconPark icons →
ICONYZ
