watermelon icon
watermelon from IconPark by ByteDance · Color · Foods · Apache-2.0 Free for personal and commercial use.
- Name
- watermelon
- Set
- IconPark
- Style
- Color
- Category
- Foods
- Viewbox
- 48×48
- License
- Apache 2.0
The same icon in other sets
watermelonEmoji One (Colored)watermelonElement PluswatermelonFluent EmojiwatermelonFluent Emoji FlatwatermelonFluent Emoji High ContrastwatermelonFirefox OS EmojiwatermelonHuge IconswatermelonIconPark OutlinewatermelonIconPark SolidwatermelonIconPark TwoTonewatermelonLucide LabwatermelonNoto EmojiwatermelonOpenMojiwatermelonTDesign IconswatermelonTwitter Emoji
More foods icons from IconPark
Use the watermelon icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none" stroke-linejoin="round" stroke-width="4"><path fill="#2F88FF" stroke="#000" d="M23 34C34.0457 34 43 25.0457 43 14H3C3 25.0457 11.9543 34 23 34Z"/><path stroke="#fff" stroke-linecap="round" d="M23 23V26"/><path stroke="#fff" stroke-linecap="round" d="M16.6358 20.3638L14.5145 22.4851"/><path stroke="#fff" stroke-linecap="round" d="M29.3643 20.3642L31.4856 22.4855"/></g></svg>
React
import type { SVGProps } from "react";
export function IconParkWatermelon(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none" strokeLinejoin="round" strokeWidth="4"><path fill="#2F88FF" stroke="#000" d="M23 34C34.0457 34 43 25.0457 43 14H3C3 25.0457 11.9543 34 23 34Z"/><path stroke="#fff" strokeLinecap="round" d="M23 23V26"/><path stroke="#fff" strokeLinecap="round" d="M16.6358 20.3638L14.5145 22.4851"/><path stroke="#fff" strokeLinecap="round" d="M29.3643 20.3642L31.4856 22.4855"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none" stroke-linejoin="round" stroke-width="4"><path fill="#2F88FF" stroke="#000" d="M23 34C34.0457 34 43 25.0457 43 14H3C3 25.0457 11.9543 34 23 34Z"/><path stroke="#fff" stroke-linecap="round" d="M23 23V26"/><path stroke="#fff" stroke-linecap="round" d="M16.6358 20.3638L14.5145 22.4851"/><path stroke="#fff" stroke-linecap="round" d="M29.3643 20.3642L31.4856 22.4855"/></g></svg> </template>
CSS
.icon-watermelon {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22none%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%3E%3Cpath%20fill%3D%22%232F88FF%22%20stroke%3D%22%23000%22%20d%3D%22M23%2034C34.0457%2034%2043%2025.0457%2043%2014H3C3%2025.0457%2011.9543%2034%2023%2034Z%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20d%3D%22M23%2023V26%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20d%3D%22M16.6358%2020.3638L14.5145%2022.4851%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20d%3D%22M29.3643%2020.3642L31.4856%2022.4855%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22none%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%3E%3Cpath%20fill%3D%22%232F88FF%22%20stroke%3D%22%23000%22%20d%3D%22M23%2034C34.0457%2034%2043%2025.0457%2043%2014H3C3%2025.0457%2011.9543%2034%2023%2034Z%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20d%3D%22M23%2023V26%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20d%3D%22M16.6358%2020.3638L14.5145%2022.4851%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20d%3D%22M29.3643%2020.3642L31.4856%2022.4855%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/icon-park/watermelon.svg?color=%231a73e8&size=48
