Float icon
icon-park:float
The Float icon (icon-park:float) 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
- Baby
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-linejoin="round" stroke-width="4"><path d="M24 40C35.0457 40 44 32.8366 44 24C44 15.1634 35.0457 8 24 8C12.9543 8 4 15.1634 4 24C4 32.8366 12.9543 40 24 40Z"/><path fill="#2F88FF" d="M24 28C29.5228 28 34 25.3137 34 22C34 18.6863 29.5228 16 24 16C18.4772 16 14 18.6863 14 22C14 25.3137 18.4772 28 24 28Z"/><path stroke-linecap="round" d="M24 16V8"/><path stroke-linecap="round" d="M32 18C32 18 34.625 14 39 14"/><path stroke-linecap="round" d="M16 18C16 18 14 14 9 14"/><path stroke-linecap="round" d="M18 27C18 27 12 29 11 36"/><path stroke-linecap="round" d="M30 27C30 27 36.5 29 37 36"/></g></svg>How to use the Float icon
React
import { Icon } from "@iconify/react";
<Icon icon="icon-park:float" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="icon-park:float" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="icon-park:float" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[icon-park--float]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/icon-park -->
<div class="i-icon-park:float"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="icon-park:float"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/icon-park/float.svg" alt="Float icon" width="24" height="24">Float icon in other icon sets
Float icon FAQ
Is the Float 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 Float icon in React?
Install @iconify/react and render <Icon icon="icon-park:float" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Float icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/icon-park/float.svg" alt="Float icon">, or paste the SVG code inline to style it with CSS.