watermelon icon
watermelon from IconPark TwoTone by ByteDance · Two tone · Foods · Apache-2.0 Free for personal and commercial use.
- Name
- watermelon
- Set
- IconPark TwoTone
- Style
- Two tone
- 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 IconswatermelonIconParkwatermelonIconPark OutlinewatermelonIconPark SolidwatermelonLucide LabwatermelonNoto EmojiwatermelonOpenMojiwatermelonTDesign IconswatermelonTwitter Emoji
More foods icons from IconPark TwoTone
Use the watermelon icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><defs><mask id="SVGWhtzJdHY"><g fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="4"><path fill="#555" d="M23 34c11.046 0 20-8.954 20-20H3c0 11.046 8.954 20 20 20Z"/><path stroke-linecap="round" d="M23 23v3m-6.364-5.636l-2.121 2.121m14.849-2.121l2.122 2.121"/></g></mask></defs><path fill="currentColor" d="M0 0h48v48H0z" mask="url(#SVGWhtzJdHY)"/></svg>
React
import type { SVGProps } from "react";
export function IconParkTwotoneWatermelon(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><defs><mask id="SVGWhtzJdHY"><g fill="none" stroke="#fff" strokeLinejoin="round" strokeWidth="4"><path fill="#555" d="M23 34c11.046 0 20-8.954 20-20H3c0 11.046 8.954 20 20 20Z"/><path strokeLinecap="round" d="M23 23v3m-6.364-5.636l-2.121 2.121m14.849-2.121l2.122 2.121"/></g></mask></defs><path fill="currentColor" d="M0 0h48v48H0z" mask="url(#SVGWhtzJdHY)"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><defs><mask id="SVGWhtzJdHY"><g fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="4"><path fill="#555" d="M23 34c11.046 0 20-8.954 20-20H3c0 11.046 8.954 20 20 20Z"/><path stroke-linecap="round" d="M23 23v3m-6.364-5.636l-2.121 2.121m14.849-2.121l2.122 2.121"/></g></mask></defs><path fill="currentColor" d="M0 0h48v48H0z" mask="url(#SVGWhtzJdHY)"/></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%3Cdefs%3E%3Cmask%20id%3D%22SVGWhtzJdHY%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%3E%3Cpath%20fill%3D%22%23555%22%20d%3D%22M23%2034c11.046%200%2020-8.954%2020-20H3c0%2011.046%208.954%2020%2020%2020Z%22%2F%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M23%2023v3m-6.364-5.636l-2.121%202.121m14.849-2.121l2.122%202.121%22%2F%3E%3C%2Fg%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M0%200h48v48H0z%22%20mask%3D%22url(%23SVGWhtzJdHY)%22%2F%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%3Cdefs%3E%3Cmask%20id%3D%22SVGWhtzJdHY%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%3E%3Cpath%20fill%3D%22%23555%22%20d%3D%22M23%2034c11.046%200%2020-8.954%2020-20H3c0%2011.046%208.954%2020%2020%2020Z%22%2F%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M23%2023v3m-6.364-5.636l-2.121%202.121m14.849-2.121l2.122%202.121%22%2F%3E%3C%2Fg%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M0%200h48v48H0z%22%20mask%3D%22url(%23SVGWhtzJdHY)%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/icon-park-twotone/watermelon.svg?color=%231a73e8&size=48
