Add icons to this collection by clicking the heart icon.
Swatch icon - also known as art, paint, color, palette, colours, swatch, ui, art and design, and swatches. Created in a clean lineal color style with a white, gray, black, red, magenta, 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="682.667"
height="682.667"
viewBox="0 0 682.667 682.667"
>
<defs>
<clipPath id="a" clipPathUnits="userSpaceOnUse">
<path d="M0 512h512V0H0Z" />
</clipPath>
</defs>
<g clip-path="url(#a)" transform="matrix(1.33333 0 0 -1.33333 0 682.667)">
<path
d="M0 0v-312.01c0-5.52-4.48-10-10-10h-477c-5.52 0-10 4.48-10 10v394.5c0 5.52 4.48 10 10 10h162.97c3.93 0 7.49-2.29 9.11-5.87L-280.189 10H-10C-4.48 10 0 5.521 0 0"
transform="translate(504.5 370.76)"
fill="#7ca2b1"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-34.841L-69.57 76.62a9.988 9.988 0 0 1-9.111 5.87h34.84a9.99 9.99 0 0 0 9.111-5.87z"
transform="translate(224.31 380.76)"
fill="#688d98"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0v-312.01c0-5.52-4.48-10-10-10h-34.84c5.52 0 10 4.48 10 10V0c0 5.521-4.48 10-10 10H-10C-4.48 10 0 5.521 0 0"
transform="translate(504.5 370.76)"
fill="#688d98"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-177.95c-2.761 0-5 2.24-5 5v41.25c0 2.76 2.239 5 5 5h154.72z"
transform="translate(224.31 380.76)"
fill="#ff5795"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-34.841L-58.07 51.25h34.84z"
transform="translate(224.31 380.76)"
fill="#fe3581"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-177.95a5 5 0 0 0-5 5v41.25a5 5 0 0 0 5 5h154.72"
transform="translate(224.31 380.76)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-163.167l-34.724 76.624a10 10 0 0 1-9.108 5.872h-162.973c-5.522 0-10-4.477-10-10v-292.903"
transform="translate(387.472 380.756)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0v-68.61c0-5.523 4.478-10 10-10h477c5.523 0 10 4.477 10 10v312.008c0 5.522-4.477 10-10 10h-74.037"
transform="translate(7.5 127.358)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-74.882c-5.522 0-10 4.478-10 10v74.882c0 5.523 4.478 10 10 10H0c5.523 0 10-4.477 10-10V10C10 4.478 5.523 0 0 0"
transform="translate(151.118 223.044)"
fill="#ffc8dd"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h47.679c5.523 0 10 4.478 10 10v47.679L0 0"
transform="translate(103.44 223.044)"
fill="#eff5f6"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="m0 0-57.679-57.679"
transform="translate(161.118 280.723)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-74.882c-5.522 0-10 4.478-10 10v74.882c0 5.523 4.478 10 10 10H0c5.523 0 10-4.477 10-10V10C10 4.478 5.523 0 0 0Z"
transform="translate(151.118 223.044)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-74.882c-5.522 0-10 4.478-10 10v74.882c0 5.523 4.478 10 10 10H0c5.522 0 10-4.477 10-10V10C10 4.478 5.522 0 0 0"
transform="translate(246 223.044)"
fill="#ffa4c6"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h47.679c5.522 0 10 4.478 10 10v47.679L0 0"
transform="translate(198.321 223.044)"
fill="#eff5f6"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="m0 0-57.679-57.679"
transform="translate(256 280.723)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-17.854c-5.523 0-10-4.477-10-10v-74.882c0-5.522 4.477-10 10-10h74.881c5.523 0 10 4.478 10 10V-10c0 5.523-4.477 10-10 10H32.99"
transform="translate(188.973 317.926)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-74.882c-5.522 0-10 4.478-10 10v74.882c0 5.523 4.478 10 10 10H0c5.522 0 10-4.477 10-10V10C10 4.478 5.522 0 0 0"
transform="translate(340.882 223.044)"
fill="#fe94bb"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h47.679c5.522 0 10 4.478 10 10v47.679L0 0"
transform="translate(293.203 223.044)"
fill="#eff5f6"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="m0 0-57.679-57.679"
transform="translate(350.882 280.723)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-74.882c-5.522 0-10 4.478-10 10v74.882c0 5.523 4.478 10 10 10H0c5.522 0 10-4.477 10-10V10C10 4.478 5.522 0 0 0Z"
transform="translate(340.882 223.044)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-74.882c-5.523 0-10 4.478-10 10v74.882c0 5.523 4.477 10 10 10H0c5.522 0 10-4.477 10-10V10C10 4.478 5.522 0 0 0"
transform="translate(435.764 223.044)"
fill="#fe76a8"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h47.68c5.522 0 10 4.478 10 10v47.679L0 0"
transform="translate(388.084 223.044)"
fill="#eff5f6"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="m0 0-57.68-57.679"
transform="translate(445.764 280.723)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-74.882c-5.523 0-10 4.478-10 10v74.882c0 5.523 4.477 10 10 10H0c5.522 0 10-4.477 10-10V10C10 4.478 5.522 0 0 0Z"
transform="translate(435.764 223.044)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-74.882c-5.522 0-10 4.477-10 10v74.881c0 5.523 4.478 10 10 10H0c5.523 0 10-4.477 10-10V10C10 4.477 5.523 0 0 0"
transform="translate(151.118 128.163)"
fill="#fe3581"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h47.679c5.523 0 10 4.477 10 10v47.679L0 0"
transform="translate(103.44 128.163)"
fill="#eff5f6"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="m0 0-57.679-57.679"
transform="translate(161.118 185.841)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-74.882c-5.522 0-10 4.477-10 10v74.881c0 5.523 4.478 10 10 10H0c5.523 0 10-4.477 10-10V10C10 4.477 5.523 0 0 0Z"
transform="translate(151.118 128.163)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-74.882c-5.522 0-10 4.477-10 10v74.881c0 5.523 4.478 10 10 10H0c5.522 0 10-4.477 10-10V10C10 4.477 5.522 0 0 0"
transform="translate(246 128.163)"
fill="#fe0364"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h47.679c5.522 0 10 4.477 10 10v47.679L0 0"
transform="translate(198.321 128.163)"
fill="#eff5f6"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="m0 0-57.679-57.679"
transform="translate(256 185.841)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-74.882c-5.522 0-10 4.477-10 10v74.881c0 5.523 4.478 10 10 10H0c5.522 0 10-4.477 10-10V10C10 4.477 5.522 0 0 0Z"
transform="translate(246 128.163)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-74.882c-5.522 0-10 4.477-10 10v74.881c0 5.523 4.478 10 10 10H0c5.522 0 10-4.477 10-10V10C10 4.477 5.522 0 0 0"
transform="translate(340.882 128.163)"
fill="#e30256"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h47.679c5.522 0 10 4.477 10 10v47.679L0 0"
transform="translate(293.203 128.163)"
fill="#eff5f6"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="m0 0-57.679-57.679"
transform="translate(350.882 185.841)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-74.882c-5.522 0-10 4.477-10 10v74.881c0 5.523 4.478 10 10 10H0c5.522 0 10-4.477 10-10V10C10 4.477 5.522 0 0 0Z"
transform="translate(340.882 128.163)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-74.882c-5.523 0-10 4.477-10 10v74.881c0 5.523 4.477 10 10 10H0c5.522 0 10-4.477 10-10V10C10 4.477 5.522 0 0 0"
transform="translate(435.764 128.163)"
fill="#d1034f"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h47.68c5.522 0 10 4.477 10 10v47.679L0 0"
transform="translate(388.084 128.163)"
fill="#eff5f6"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="m0 0-57.68-57.679"
transform="translate(445.764 185.841)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-74.882c-5.523 0-10 4.477-10 10v74.881c0 5.523 4.477 10 10 10H0c5.522 0 10-4.477 10-10V10C10 4.477 5.522 0 0 0Z"
transform="translate(435.764 128.163)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h17.441"
transform="translate(66.236 92.804)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
</svg>
More icons in the same style and category