Add icons to this collection by clicking the heart icon.
Potion icon - also known as heart, container, love, magic, witchcraft, romantic, love potion, potion, valentines day, and love and romance. Created in a clean flat gradient style, perfect for web, apps, and UI projects. Available in SVG and PNG, with multiple style variants.
<svg
xmlns="http://www.w3.org/2000/svg"
width="512"
height="512"
viewBox="0 0 512 512"
>
<linearGradient
id="a"
x1="182.734"
x2="329.266"
y1="399.231"
y2="399.231"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#b8def6" />
<stop offset=".321" stop-color="#b5dcf5" />
<stop offset=".59" stop-color="#aad6f3" />
<stop offset=".839" stop-color="#9ce" />
<stop offset=".967" stop-color="#8dc5eb" />
</linearGradient>
<linearGradient
id="b"
x1="212.689"
x2="299.313"
y1="89.462"
y2="89.462"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#f9baac" />
<stop offset="1" stop-color="#f0a392" />
</linearGradient>
<linearGradient
id="c"
x1="256.001"
x2="256.001"
y1="206.919"
y2="125.445"
href="#a"
/>
<radialGradient
id="d"
cx="84.56"
cy="155.842"
r="327.765"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#b8def6" />
<stop offset=".809" stop-color="#95c9ed" />
<stop offset=".967" stop-color="#8dc5eb" />
</radialGradient>
<radialGradient
id="e"
cx="115.319"
cy="221.436"
r="294.766"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#f49bb4" />
<stop offset=".33" stop-color="#f398b1" />
<stop offset=".596" stop-color="#ef8ea9" />
<stop offset=".838" stop-color="#e97d9b" />
<stop offset="1" stop-color="#e36d8e" />
</radialGradient>
<radialGradient
id="f"
cx="243.488"
cy="346.356"
r="53.75"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#e36d8e" />
<stop offset=".253" stop-color="#e67c99" />
<stop offset=".735" stop-color="#efa2b7" />
<stop offset=".954" stop-color="#f4b5c6" />
</radialGradient>
<radialGradient
id="g"
cx="290.763"
cy="259.544"
r="48.947"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#e36d8e" />
<stop offset=".419" stop-color="#ea8aa5" />
<stop offset=".954" stop-color="#f4b5c6" />
</radialGradient>
<radialGradient
id="h"
cx="191.589"
cy="278.63"
r="57.652"
gradientUnits="userSpaceOnUse"
>
<stop offset=".166" stop-color="#e36d8e" />
<stop offset=".393" stop-color="#e77e9b" />
<stop offset=".836" stop-color="#f1a9bc" />
<stop offset=".954" stop-color="#f4b5c6" />
</radialGradient>
<g>
<path
fill="url(#a)"
d="M324.187 434.541c-17.944 17.945-118.43 17.945-136.374 0s17.431-84.08 17.431-84.08h101.512s35.376 66.136 17.431 84.08z"
/>
<path
fill="url(#b)"
d="M222.689 64h66.624a10 10 0 0 1 10 10v40.924h-86.624V74a10 10 0 0 1 10-10z"
/>
<path fill="url(#c)" d="M204.383 125.445h103.236v81.474H204.383z" />
<rect
width="145.285"
height="36.321"
x="183.358"
y="100.518"
fill="#b8def6"
rx="10"
/>
<path
fill="url(#d)"
d="M398.193 241.535c3.829-77.056-93.887-105.615-142.196-51.939-46.867-52.074-140.3-26.712-142.268 45.267l148.498 89.167z"
/>
<path
fill="url(#e)"
d="M321.805 227.556c-65.807 0-65.807 21.31-131.615 21.31-39.9 0-55.608-7.834-76.46-14.003-1.25 45.71 34.382 110.218 142.267 185.641 102.73-71.818 139.948-133.744 142.196-178.969-20.815-6.165-36.535-13.98-76.388-13.98z"
/>
<circle cx="262.227" cy="363.007" r="15.983" fill="url(#f)" />
<circle cx="304.983" cy="272.017" r="15.983" fill="url(#g)" />
<circle cx="212.689" cy="299.873" r="15.983" fill="url(#h)" />
</g>
</svg>
More icons in the same style and category