Add icons to this collection by clicking the heart icon.
Button icon - also known as button, shapes, circle, clothes, circles, miscellaneous, circle shapes, clothes button, and clothing button. Created in a clean lineal color style with a yellow, navy, and pink finish, 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="100"
height="100"
viewBox="0 0 512 512"
>
<path
d="M256 0C114.833 0 0 114.844 0 256s114.833 256 256 256 256-114.844 256-256S397.167 0 256 0z"
fill="#303c42"
/>
<path
d="M256 490.667C126.604 490.667 21.333 385.396 21.333 256S126.604 21.333 256 21.333 490.667 126.604 490.667 256 385.396 490.667 256 490.667z"
fill="#ffd54f"
/>
<path
d="M256 448c-105.869 0-192-86.131-192-192S150.131 64 256 64s192 86.131 192 192-86.131 192-192 192z"
fill="#303c42"
/>
<circle cx="256" cy="256" r="170.667" fill="#ffdd72" />
<circle cx="192" cy="192" r="21.333" fill="#303c42" />
<path
d="M181.333 202.667c0-11.76 9.563-21.333 21.333-21.333 3.12 0 6.034.747 8.706 1.954-3.349-7.404-10.725-12.621-19.372-12.621-11.771 0-21.333 9.573-21.333 21.333 0 8.645 5.216 16.031 12.628 19.379-1.21-2.675-1.962-5.591-1.962-8.712z"
opacity=".3"
/>
<path
d="M140.965 381.703C113.142 351.326 96 311.01 96 266.667 96 172.561 172.561 96 266.667 96c44.342 0 84.658 17.142 115.035 44.965C350.477 106.874 305.763 85.333 256 85.333c-94.105 0-170.667 76.561-170.667 170.667 0 49.763 21.541 94.478 55.632 125.703z"
opacity=".1"
/>
<linearGradient
id="a"
x1="-34.555"
x2="-26.942"
y1="634.31"
y2="626.697"
gradientTransform="matrix(21.3333 0 0 -21.3333 996.333 13791.667)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#000" stop-opacity=".1" />
<stop offset="1" stop-color="#000" stop-opacity="0" />
</linearGradient>
<path
d="m487.189 217.245-82.193-82.193-.038.033C431.827 168.122 448 210.194 448 256c0 105.868-86.13 192-192 192-51.184 0-97.635-20.257-132.09-53.017l92.001 92.001c13.055 2.262 26.397 3.682 40.089 3.682 129.396 0 234.667-105.271 234.667-234.667 0-13.227-1.365-26.117-3.478-38.754z"
fill="url(#a)"
/>
<circle cx="320" cy="192" r="21.333" fill="#303c42" />
<path
d="M309.333 202.667c0-11.76 9.563-21.333 21.333-21.333 3.12 0 6.034.747 8.706 1.954-3.349-7.404-10.725-12.621-19.372-12.621-11.771 0-21.333 9.573-21.333 21.333 0 8.645 5.216 16.031 12.628 19.379-1.21-2.675-1.962-5.591-1.962-8.712z"
opacity=".3"
/>
<circle cx="192" cy="320" r="21.333" fill="#303c42" />
<path
d="M181.333 330.667c0-11.76 9.563-21.333 21.333-21.333 3.12 0 6.034.747 8.706 1.954-3.349-7.404-10.725-12.621-19.372-12.621-11.771 0-21.333 9.573-21.333 21.333 0 8.645 5.216 16.031 12.628 19.379-1.21-2.675-1.962-5.591-1.962-8.712z"
opacity=".3"
/>
<circle cx="320" cy="320" r="21.333" fill="#303c42" />
<path
d="M309.333 330.667c0-11.76 9.563-21.333 21.333-21.333 3.12 0 6.034.747 8.706 1.954-3.349-7.404-10.725-12.621-19.372-12.621-11.771 0-21.333 9.573-21.333 21.333 0 8.645 5.216 16.031 12.628 19.379-1.21-2.675-1.962-5.591-1.962-8.712z"
opacity=".3"
/>
<linearGradient
id="b"
x1="-45.578"
x2="-23.828"
y1="639.555"
y2="629.414"
gradientTransform="matrix(21.3333 0 0 -21.3333 996.333 13791.667)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#fff" stop-opacity=".2" />
<stop offset="1" stop-color="#fff" stop-opacity="0" />
</linearGradient>
<path
d="M256 0C114.833 0 0 114.844 0 256s114.833 256 256 256 256-114.844 256-256S397.167 0 256 0z"
fill="url(#b)"
/>
</svg>
More icons in the same style and category