watermelon icon
watermelon from TDesign Icons by TDesign · Outline · MIT Free for personal and commercial use.
- Name
- watermelon
- Set
- TDesign Icons
- Style
- Outline
- Viewbox
- 24×24
- License
- MIT
1 other variant in TDesign Icons
The same icon in other sets
watermelonEmoji One (Colored)watermelonElement PluswatermelonFluent EmojiwatermelonFluent Emoji FlatwatermelonFluent Emoji High ContrastwatermelonFirefox OS EmojiwatermelonHuge IconswatermelonIconParkwatermelonIconPark OutlinewatermelonIconPark SolidwatermelonIconPark TwoTonewatermelonLucide LabwatermelonNoto EmojiwatermelonOpenMojiwatermelonTwitter Emoji
Use the watermelon icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path d="M21.5 10.988c0 5.806-4.706 10.512-10.512 10.512c-2.93 0-6.582-2.065-8.488-4c2.712 2.134 6.488 2 6.488 2c5.806 0 10.512-4.706 10.512-10.512c-.012.012.135-4.353-2-6.488c1.935 1.906 4 5.557 4 8.488"/><path d="m17.5 2.5l-15 15c2.712 2.134 6.488 2 6.488 2c5.806 0 10.512-4.706 10.512-10.512c-.012.012.135-4.353-2-6.488"/><path stroke="currentColor" stroke-linecap="square" stroke-width="2" d="M17.5 2.5c1.935 1.906 4 5.557 4 8.488c0 5.806-4.706 10.512-10.512 10.512c-2.93 0-6.582-2.065-8.488-4zm0 0c2.135 2.135 1.988 6.5 2 6.488c0 5.806-4.706 10.512-10.512 10.512c0 0-2.973.106-5.538-1.362"/><path stroke="currentColor" stroke-linecap="square" stroke-width="2" d="M9.502 15.498h-.004v.004h.004zm3-3h-.004v.004h.004zm3-3h-.004v.004h.004z"/></g></svg>
React
import type { SVGProps } from "react";
export function TdesignWatermelon(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path d="M21.5 10.988c0 5.806-4.706 10.512-10.512 10.512c-2.93 0-6.582-2.065-8.488-4c2.712 2.134 6.488 2 6.488 2c5.806 0 10.512-4.706 10.512-10.512c-.012.012.135-4.353-2-6.488c1.935 1.906 4 5.557 4 8.488"/><path d="m17.5 2.5l-15 15c2.712 2.134 6.488 2 6.488 2c5.806 0 10.512-4.706 10.512-10.512c-.012.012.135-4.353-2-6.488"/><path stroke="currentColor" strokeLinecap="square" strokeWidth="2" d="M17.5 2.5c1.935 1.906 4 5.557 4 8.488c0 5.806-4.706 10.512-10.512 10.512c-2.93 0-6.582-2.065-8.488-4zm0 0c2.135 2.135 1.988 6.5 2 6.488c0 5.806-4.706 10.512-10.512 10.512c0 0-2.973.106-5.538-1.362"/><path stroke="currentColor" strokeLinecap="square" strokeWidth="2" d="M9.502 15.498h-.004v.004h.004zm3-3h-.004v.004h.004zm3-3h-.004v.004h.004z"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path d="M21.5 10.988c0 5.806-4.706 10.512-10.512 10.512c-2.93 0-6.582-2.065-8.488-4c2.712 2.134 6.488 2 6.488 2c5.806 0 10.512-4.706 10.512-10.512c-.012.012.135-4.353-2-6.488c1.935 1.906 4 5.557 4 8.488"/><path d="m17.5 2.5l-15 15c2.712 2.134 6.488 2 6.488 2c5.806 0 10.512-4.706 10.512-10.512c-.012.012.135-4.353-2-6.488"/><path stroke="currentColor" stroke-linecap="square" stroke-width="2" d="M17.5 2.5c1.935 1.906 4 5.557 4 8.488c0 5.806-4.706 10.512-10.512 10.512c-2.93 0-6.582-2.065-8.488-4zm0 0c2.135 2.135 1.988 6.5 2 6.488c0 5.806-4.706 10.512-10.512 10.512c0 0-2.973.106-5.538-1.362"/><path stroke="currentColor" stroke-linecap="square" stroke-width="2" d="M9.502 15.498h-.004v.004h.004zm3-3h-.004v.004h.004zm3-3h-.004v.004h.004z"/></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%2024%2024%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M21.5%2010.988c0%205.806-4.706%2010.512-10.512%2010.512c-2.93%200-6.582-2.065-8.488-4c2.712%202.134%206.488%202%206.488%202c5.806%200%2010.512-4.706%2010.512-10.512c-.012.012.135-4.353-2-6.488c1.935%201.906%204%205.557%204%208.488%22%2F%3E%3Cpath%20d%3D%22m17.5%202.5l-15%2015c2.712%202.134%206.488%202%206.488%202c5.806%200%2010.512-4.706%2010.512-10.512c-.012.012.135-4.353-2-6.488%22%2F%3E%3Cpath%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22square%22%20stroke-width%3D%222%22%20d%3D%22M17.5%202.5c1.935%201.906%204%205.557%204%208.488c0%205.806-4.706%2010.512-10.512%2010.512c-2.93%200-6.582-2.065-8.488-4zm0%200c2.135%202.135%201.988%206.5%202%206.488c0%205.806-4.706%2010.512-10.512%2010.512c0%200-2.973.106-5.538-1.362%22%2F%3E%3Cpath%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22square%22%20stroke-width%3D%222%22%20d%3D%22M9.502%2015.498h-.004v.004h.004zm3-3h-.004v.004h.004zm3-3h-.004v.004h.004z%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%2024%2024%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M21.5%2010.988c0%205.806-4.706%2010.512-10.512%2010.512c-2.93%200-6.582-2.065-8.488-4c2.712%202.134%206.488%202%206.488%202c5.806%200%2010.512-4.706%2010.512-10.512c-.012.012.135-4.353-2-6.488c1.935%201.906%204%205.557%204%208.488%22%2F%3E%3Cpath%20d%3D%22m17.5%202.5l-15%2015c2.712%202.134%206.488%202%206.488%202c5.806%200%2010.512-4.706%2010.512-10.512c-.012.012.135-4.353-2-6.488%22%2F%3E%3Cpath%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22square%22%20stroke-width%3D%222%22%20d%3D%22M17.5%202.5c1.935%201.906%204%205.557%204%208.488c0%205.806-4.706%2010.512-10.512%2010.512c-2.93%200-6.582-2.065-8.488-4zm0%200c2.135%202.135%201.988%206.5%202%206.488c0%205.806-4.706%2010.512-10.512%2010.512c0%200-2.973.106-5.538-1.362%22%2F%3E%3Cpath%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22square%22%20stroke-width%3D%222%22%20d%3D%22M9.502%2015.498h-.004v.004h.004zm3-3h-.004v.004h.004zm3-3h-.004v.004h.004z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/tdesign/watermelon.svg?color=%231a73e8&size=48
