Lotion icon
icon-park:lotion
The Lotion icon (icon-park:lotion) 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
- Makeups
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-linecap="round" stroke-linejoin="round" stroke-width="4"><rect width="14" height="7" x="17" y="37" fill="#2F88FF"/><path d="M36 4H12C12 4 12 12 13 21C14 30 17 37 17 37H31C31 37 34 30 35 21C36 12 36 4 36 4Z"/><path d="M20.643 21.8886C22.0743 20.0081 23.1776 17.4103 23.774 16C24.8177 17.4103 27.084 20.9484 27.7997 22.8288C28.6942 25.1793 26.4578 28 23.774 28C21.0903 28 18.8538 24.2391 20.643 21.8886Z"/><path d="M13 10L35 10"/></g></svg>How to use the Lotion icon
React
import { Icon } from "@iconify/react";
<Icon icon="icon-park:lotion" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="icon-park:lotion" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="icon-park:lotion" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[icon-park--lotion]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/icon-park -->
<div class="i-icon-park:lotion"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="icon-park:lotion"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/icon-park/lotion.svg" alt="Lotion icon" width="24" height="24">Lotion icon in other icon sets
Lotion icon FAQ
Is the Lotion 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 Lotion icon in React?
Install @iconify/react and render <Icon icon="icon-park:lotion" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Lotion icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/icon-park/lotion.svg" alt="Lotion icon">, or paste the SVG code inline to style it with CSS.