Add icons to this collection by clicking the heart icon.
Button icon - also known as button, circles, sewing, clothing button, hobbies and free time, handcraft, and furniture and household. 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 64 64"
>
<linearGradient id="a">
<stop offset="0" stop-color="#d18b2f" />
<stop offset=".277" stop-color="#f2dbad" />
<stop offset=".656" stop-color="#666867" />
<stop offset="1" stop-color="#f2c555" />
</linearGradient>
<linearGradient
id="b"
x1="-2.717"
x2="42.168"
y1="15.283"
y2="60.168"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="c"
x1="1.283"
x2="46.168"
y1="11.283"
y2="56.168"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="d"
x1="-3.217"
x2="41.668"
y1="15.783"
y2="60.668"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="e"
x1="-7.217"
x2="37.668"
y1="19.783"
y2="64.668"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="f"
x1="6.283"
x2="51.168"
y1="6.283"
y2="51.168"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="g"
x1="19.283"
x2="64.168"
y1="-6.717"
y2="38.168"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="h"
x1="15.283"
x2="60.168"
y1="-2.717"
y2="42.168"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<path
fill="url(#b)"
d="M23 24c-9.374 0-17 7.626-17 17s7.626 17 17 17 17-7.626 17-17-7.626-17-17-17zm0 32c-8.271 0-15-6.729-15-15s6.729-15 15-15 15 6.729 15 15-6.729 15-15 15z"
/>
<path
fill="url(#c)"
d="M27 34c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zm0 4c-.551 0-1-.449-1-1s.449-1 1-1 1 .449 1 1-.449 1-1 1z"
/>
<path
fill="url(#b)"
d="M19 34c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zm0 4c-.551 0-1-.449-1-1s.449-1 1-1 1 .449 1 1-.449 1-1 1z"
/>
<path
fill="url(#d)"
d="M27 43c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zm0 4c-.551 0-1-.449-1-1s.449-1 1-1 1 .449 1 1-.449 1-1 1z"
/>
<path
fill="url(#e)"
d="M19 43c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zm0 4c-.551 0-1-.449-1-1s.449-1 1-1 1 .449 1 1-.449 1-1 1z"
/>
<path
fill="url(#f)"
d="M41 0a22.899 22.899 0 0 0-22.527 18.45C7.952 20.559 0 29.867 0 41c0 12.682 10.318 23 23 23 11.133 0 20.441-7.952 22.55-18.473A22.899 22.899 0 0 0 64 23C64 10.318 53.682 0 41 0zM23 62C11.42 62 2 52.58 2 41s9.42-21 21-21 21 9.42 21 21-9.42 21-21 21zm20.493-31.421c.445.261.955.421 1.507.421 1.654 0 3-1.346 3-3s-1.346-3-3-3-3 1.346-3 3c0 .022.006.043.007.065-3.473-5.087-8.933-8.712-15.253-9.754A14.95 14.95 0 0 1 41 8c8.271 0 15 6.729 15 15a14.952 14.952 0 0 1-10.311 14.247 22.819 22.819 0 0 0-2.196-6.668zM44 28c0-.551.449-1 1-1s1 .449 1 1-.449 1-1 1-1-.449-1-1zm1.873 15.414C45.956 42.62 46 41.815 46 41c0-.586-.029-1.166-.073-1.741A16.94 16.94 0 0 0 58 23c0-9.374-7.626-17-17-17a16.94 16.94 0 0 0-16.259 12.073A22.792 22.792 0 0 0 23 18c-.815 0-1.62.044-2.414.127A20.906 20.906 0 0 1 41 2c11.58 0 21 9.42 21 21a20.906 20.906 0 0 1-16.127 20.414z"
/>
<path
fill="url(#g)"
d="M45 16c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zm0 4c-.551 0-1-.449-1-1s.449-1 1-1 1 .449 1 1-.449 1-1 1z"
/>
<path
fill="url(#h)"
d="M37 16c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zm0 4c-.551 0-1-.449-1-1s.449-1 1-1 1 .449 1 1-.449 1-1 1z"
/>
</svg>
More icons in the same style and category