Add icons to this collection by clicking the heart icon.
Bubble Tea icon - also known as drink, beverage, take away, bubble tea, food and restaurant, boba, and milk tea. Created in a clean 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"
>
<radialGradient
id="f"
cx="314.126"
cy="1835.16"
r="163.168"
gradientTransform="matrix(.931 0 0 .112 -38.569 287.754)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#f1d59d" />
<stop offset=".298" stop-color="#f6e5c3" />
<stop offset=".508" stop-color="#f9efda" />
<stop offset=".888" stop-color="#fff" />
</radialGradient>
<radialGradient
id="g"
cx="190.766"
cy="323.135"
r="132.23"
gradientTransform="matrix(1 0 0 2.23 0 -397.548)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#fff" />
<stop offset=".514" stop-color="#fbf4c6" />
<stop offset="1" stop-color="#f9efaf" />
</radialGradient>
<linearGradient id="a">
<stop offset="0" stop-color="#fff" />
<stop offset=".514" stop-color="#ecf4ff" />
<stop offset="1" stop-color="#ddeafb" />
</linearGradient>
<radialGradient
id="h"
cx="167.693"
cy="345.724"
r="141.726"
gradientTransform="matrix(1 0 0 1.031 0 -10.873)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<radialGradient
id="i"
cx="209.48"
cy="118.637"
r="143.967"
gradientTransform="matrix(.755 -.655 .448 .517 -1.91 194.647)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<radialGradient
id="j"
cx="155.653"
cy="172.196"
r="64.621"
gradientTransform="matrix(1 0 0 .608 0 67.536)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<radialGradient
id="k"
cx="188.677"
cy="321.366"
r="229.434"
gradientTransform="matrix(1 0 0 1.331 0 -106.286)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#fbf4c6" />
<stop offset=".127" stop-color="#fbf3c0" />
<stop offset=".298" stop-color="#f9f0af" />
<stop offset=".492" stop-color="#f7ea93" />
<stop offset=".597" stop-color="#f6e781" />
<stop offset="1" stop-color="#f1cb86" />
</radialGradient>
<linearGradient id="b">
<stop offset="0" stop-color="#ddeafb" />
<stop offset=".134" stop-color="#d7e7fb" />
<stop offset=".312" stop-color="#c6ddfb" />
<stop offset=".516" stop-color="#aacdfb" />
<stop offset=".597" stop-color="#9dc6fb" />
<stop offset="1" stop-color="#89aada" />
</linearGradient>
<radialGradient
id="l"
cx="198.577"
cy="78.614"
r="203.973"
gradientTransform="matrix(1 0 0 .684 0 24.856)"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<radialGradient
id="m"
cx="246.503"
cy="164.53"
r="84.359"
gradientTransform="matrix(1 0 0 .646 0 -81.892)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#e28086" />
<stop offset=".114" stop-color="#e17a81" />
<stop offset=".267" stop-color="#df6972" />
<stop offset=".441" stop-color="#dc4d59" />
<stop offset=".597" stop-color="#d82e3d" />
<stop offset="1" stop-color="#b93333" />
</radialGradient>
<linearGradient id="c">
<stop offset="0" stop-color="#eab1b7" />
<stop offset=".118" stop-color="#e9abb1" />
<stop offset=".276" stop-color="#e69aa1" />
<stop offset=".456" stop-color="#e27e87" />
<stop offset=".597" stop-color="#dd636e" />
<stop offset="1" stop-color="#d06161" />
</linearGradient>
<radialGradient
id="n"
cx="246.503"
cy="164.53"
r="84.359"
gradientTransform="matrix(1 0 0 2.871 0 -363.969)"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<radialGradient
id="o"
cx="250.723"
cy="74.319"
r="23.103"
gradientTransform="matrix(1 0 0 2.643 0 -122.117)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#f4c3c6" />
<stop offset=".103" stop-color="#f3bdc0" />
<stop offset=".242" stop-color="#eeacb1" />
<stop offset=".4" stop-color="#e89097" />
<stop offset=".572" stop-color="#df6974" />
<stop offset=".597" stop-color="#dd636e" />
<stop offset="1" stop-color="#d06161" />
</radialGradient>
<radialGradient
id="p"
cx="293.058"
cy="152.784"
r="223.314"
gradientTransform="matrix(1 0 0 .608 0 59.923)"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<radialGradient
id="q"
cx="246.503"
cy="164.53"
r="84.359"
gradientTransform="matrix(1 0 0 2.871 0 -363.969)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#fbe2dd" />
<stop offset=".507" stop-color="#f6d3d5" />
<stop offset="1" stop-color="#eab1b7" />
</radialGradient>
<radialGradient
id="r"
cx="187.649"
cy="321.79"
r="249.758"
gradientTransform="matrix(1 0 0 .735 0 85.433)"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<radialGradient
id="s"
cx="246.503"
cy="164.53"
r="84.359"
gradientTransform="matrix(1 0 0 1.079 0 -15.431)"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<linearGradient id="d">
<stop offset="0" stop-color="#808b95" />
<stop offset=".152" stop-color="#7a858f" />
<stop offset=".356" stop-color="#69757e" />
<stop offset=".589" stop-color="#4e5a62" />
<stop offset=".597" stop-color="#4d5961" />
<stop offset="1" stop-color="#404a4a" />
</linearGradient>
<radialGradient
id="t"
cx="338.677"
cy="393.993"
r="28.256"
gradientTransform="matrix(-1 0 0 -1.131 677.354 839.566)"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<radialGradient
id="u"
cx="342.23"
cy="451.717"
r="26.999"
gradientTransform="matrix(-1 0 0 -1.131 684.46 962.573)"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<radialGradient
id="v"
cx="243.675"
cy="393.676"
r="26.976"
gradientTransform="matrix(-1 0 0 -1.131 487.35 838.892)"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<linearGradient id="e">
<stop offset="0" stop-color="#dae4ea" />
<stop offset=".514" stop-color="#a0aab7" />
<stop offset="1" stop-color="#909ba5" />
</linearGradient>
<radialGradient
id="w"
cx="174.285"
cy="384.574"
r="23.864"
gradientTransform="matrix(-1 0 0 -1.131 348.57 819.497)"
gradientUnits="userSpaceOnUse"
href="#e"
/>
<radialGradient
id="x"
cx="176.799"
cy="455.893"
r="19.782"
gradientTransform="matrix(-1 0 0 -1.131 353.598 971.471)"
gradientUnits="userSpaceOnUse"
href="#e"
/>
<radialGradient
id="y"
cx="242.282"
cy="451.27"
r="25.189"
gradientTransform="matrix(-1 0 0 -1.131 484.563 961.619)"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<radialGradient
id="z"
cx="291.938"
cy="424.172"
r="31.58"
gradientTransform="matrix(-1 0 0 -1.131 583.877 903.877)"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<radialGradient
id="A"
cx="194.712"
cy="420.503"
r="34.67"
gradientTransform="matrix(-1 0 0 -1.131 389.423 896.057)"
gradientUnits="userSpaceOnUse"
href="#e"
/>
<radialGradient
id="B"
cx="193.293"
cy="420.503"
r="34.525"
gradientTransform="matrix(-1 0 0 -1.131 386.586 896.057)"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<path
fill="url(#f)"
d="M256 512c87.431 0 158.308-8.684 158.308-19.395H97.692C97.692 503.316 168.569 512 256 512z"
/>
<path
fill="url(#g)"
d="m150.289 492.605-12.749-264.28 62.822-22.219-10.073 286.499z"
/>
<path
fill="url(#h)"
d="m137.54 228.325-1.637-33.932 51.118-15.079-9.481 49.011z"
/>
<path
fill="url(#i)"
d="M129.511 164.235c6.277-49.341 42.954-89.18 90.66-100.181h40c-30.373 20.499-59.808 60.734-90.66 100.181z"
/>
<path
fill="url(#j)"
d="m116.261 194.393 6-30.158h40l3.16 16.883-9.16 13.275z"
/>
<path
fill="url(#k)"
d="m177.54 228.325 12.749 264.28h171.13l12.749-264.28z"
/>
<path
fill="url(#l)"
d="M291.537 64.054H260.17c-47.705 11-84.382 50.839-90.66 100.181h212.686c-6.276-49.341-42.953-89.18-90.659-100.181z"
/>
<path fill="url(#m)" d="M246.474 0h28.76v64.054h-28.76z" />
<path fill="url(#n)" d="M246.474 64.054h28.76v100.181h-28.76z" />
<path
fill="url(#o)"
d="M260.17 64.054h-13.697v4.05a117.57 117.57 0 0 1 13.697-4.05z"
/>
<path fill="url(#p)" d="M389.452 164.235H162.261l-6 30.158h238.191z" />
<path fill="url(#q)" d="M246.474 164.235h28.76v30.158h-28.76z" />
<path
fill="url(#r)"
d="m175.903 194.393 1.637 33.932h196.628l1.636-33.932z"
/>
<path fill="url(#s)" d="M246.474 194.393h28.76v33.932h-28.76z" />
<circle cx="331.327" cy="401.685" r="14.679" fill="url(#t)" />
<circle cx="335.207" cy="459.068" r="14.026" fill="url(#u)" />
<circle cx="236.658" cy="401.021" r="14.014" fill="url(#v)" />
<circle cx="168.077" cy="391.071" r="12.397" fill="url(#w)" />
<circle cx="171.653" cy="461.279" r="10.277" fill="url(#x)" />
<circle cx="235.729" cy="458.127" r="13.086" fill="url(#y)" />
<circle cx="283.723" cy="432.77" r="16.406" fill="url(#z)" />
<path
fill="url(#A)"
d="M176.435 428.895c0 7.286 4.864 13.436 11.522 15.38l.97-16.875-2.429-13.38c-5.898 2.364-10.063 8.133-10.063 14.875z"
/>
<path
fill="url(#B)"
d="M192.455 412.875a15.958 15.958 0 0 0-5.958 1.145l1.459 30.255a16.01 16.01 0 0 0 5.183.625c8.53-.359 15.335-7.387 15.335-16.006.001-8.847-7.171-16.019-16.019-16.019z"
/>
</svg>
More icons in the same style and category