Add icons to this collection by clicking the heart icon.
Color Picker icon - also known as art, paint, color, colour, Picker, tool, graphic design, design, color picker, art and design, and edit tools. Created in a clean lineal color style with a white, silver, gray, black, red, yellow, teal, and orange 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 0h-415.812c-22.327 0-40.594-18.268-40.594-40.594v-415.812c0-22.326 18.267-40.594 40.594-40.594H0c22.326 0 40.594 18.268 40.594 40.594v415.812C40.594-18.268 22.326 0 0 0"
transform="translate(463.906 504.5)"
fill="#dfebfa"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0v415.812c0 22.327 18.268 40.594 40.594 40.594H9.927c-22.326 0-40.594-18.267-40.594-40.594V0c0-22.326 18.268-40.594 40.594-40.594h30.667C18.268-40.594 0-22.326 0 0"
transform="translate(38.167 48.094)"
fill="#b1dbfc"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-415.812c-22.327 0-40.594-18.268-40.594-40.594v-19.727h497v19.727C40.594-18.268 22.326 0 0 0"
transform="translate(463.906 504.5)"
fill="#23a8fe"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0v-18.917c0-6.881 5.63-12.512 12.511-12.512h155.277c6.881 0 12.511 5.631 12.511 12.512V0z"
transform="translate(75.701 444.179)"
fill="#8cc9f9"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0v18.917h-30.25V0c0-6.881 5.63-12.512 12.511-12.512h30.25C5.63-12.512 0-6.881 0 0"
transform="translate(105.951 425.262)"
fill="#60b8fe"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M75.701 394.396H7.5v49.782h68.201z"
fill="#b1dbfc"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M38.167 444.179H7.5v-49.782h30.667zM75.701 344.615H7.5v49.781h68.201z"
fill="#8cc9f9"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M38.167 394.396H7.5v-49.781h30.667z"
fill="#60b8fe"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M75.701 294.834H7.5v49.781h68.201z"
fill="#b1dbfc"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M38.167 344.615H7.5v-49.781h30.667zM75.701 245.053H7.5v49.781h68.201z"
fill="#8cc9f9"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M38.167 294.834H7.5v-49.781h30.667z"
fill="#60b8fe"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M75.701 145.49H7.5v49.781h68.201z"
fill="#8cc9f9"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M38.167 195.271H7.5V145.49h30.667z"
fill="#60b8fe"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M75.701 195.271H7.5v49.781h68.201z"
fill="#b1dbfc"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M38.167 245.053H7.5v-49.781h30.667z"
fill="#8cc9f9"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0v-49.782h57.879c5.701 0 10.322 4.621 10.322 10.322V0Z"
transform="translate(7.5 145.49)"
fill="#b1dbfc"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M38.167 145.49H7.5V95.709h30.667z"
fill="#8cc9f9"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-58.01c-22.326 0-40.594-18.268-40.594-40.594v-19.727H0Z"
transform="translate(106.103 504.5)"
fill="#ff656f"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0c0 22.326 18.268 40.594 40.594 40.594H9.927c-22.326 0-40.594-18.268-40.594-40.594v-19.728H0Z"
transform="translate(38.167 463.906)"
fill="#ff4756"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0c3.131 0 5.929 1.398 7.822 3.599l-65.701 46.183V0Z"
transform="translate(65.379 95.708)"
fill="#8cc9f9"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="m0 0-30.667 21.557v-49.782H0Z"
transform="translate(38.167 123.934)"
fill="#60b8fe"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-212.271a6.04 6.04 0 0 1-6.039-6.039v-256.692a6.04 6.04 0 0 1 6.039-6.04H0Z"
transform="translate(322.528 385.073)"
fill="#60b8fe"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0v256.692a6.039 6.039 0 0 0 6.039 6.039h-29.667a6.039 6.039 0 0 1-6.039-6.039V0a6.039 6.039 0 0 1 6.039-6.039H6.039A6.039 6.039 0 0 0 0 0"
transform="translate(133.886 122.342)"
fill="#23a8fe"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-55.269a6.772 6.772 0 0 1-6.772-6.772v-20.627a6.771 6.771 0 0 1 6.772-6.772H0a6.771 6.771 0 0 1 6.771 6.772v20.627A6.772 6.772 0 0 1 0 0"
transform="translate(465.935 383.99)"
fill="#b1dbfc"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-55.269a6.772 6.772 0 0 1-6.772-6.771v-20.628a6.772 6.772 0 0 1 6.772-6.773H0a6.772 6.772 0 0 1 6.771 6.773v20.628A6.772 6.772 0 0 1 0 0"
transform="translate(465.935 325.611)"
fill="#b1dbfc"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-55.269a6.772 6.772 0 0 1-6.772-6.772v-20.627a6.772 6.772 0 0 1 6.772-6.773H0a6.772 6.772 0 0 1 6.771 6.773v20.627A6.772 6.772 0 0 1 0 0"
transform="translate(465.935 267.232)"
fill="#b1dbfc"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-55.269a6.771 6.771 0 0 1-6.772-6.771v-20.628a6.771 6.771 0 0 1 6.772-6.772H0a6.771 6.771 0 0 1 6.771 6.772v20.628A6.771 6.771 0 0 1 0 0"
transform="translate(465.935 208.852)"
fill="#b1dbfc"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-55.269a6.772 6.772 0 0 1-6.772-6.771v-20.628a6.771 6.771 0 0 1 6.772-6.772H0a6.771 6.771 0 0 1 6.771 6.772v20.628A6.772 6.772 0 0 1 0 0"
transform="translate(465.935 150.474)"
fill="#b1dbfc"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0v20.627a6.771 6.771 0 0 0 6.771 6.772h-30.5a6.771 6.771 0 0 1-6.771-6.772V0a6.771 6.771 0 0 1 6.771-6.772h30.5A6.771 6.771 0 0 0 0 0"
transform="translate(434.394 356.59)"
fill="#8cc9f9"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0v20.628a6.771 6.771 0 0 0 6.771 6.771h-30.5a6.771 6.771 0 0 1-6.771-6.771V0a6.771 6.771 0 0 1 6.771-6.772h30.5A6.771 6.771 0 0 0 0 0"
transform="translate(434.394 298.212)"
fill="#8cc9f9"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0v20.628A6.771 6.771 0 0 0 6.771 27.4h-30.5a6.771 6.771 0 0 1-6.771-6.772V0a6.77 6.77 0 0 1 6.771-6.771h30.5A6.77 6.77 0 0 0 0 0"
transform="translate(434.394 239.832)"
fill="#8cc9f9"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0v20.628a6.771 6.771 0 0 0 6.771 6.771h-30.5a6.771 6.771 0 0 1-6.771-6.771V0a6.77 6.77 0 0 1 6.771-6.771h30.5A6.77 6.77 0 0 0 0 0"
transform="translate(434.394 181.453)"
fill="#8cc9f9"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0v20.628a6.771 6.771 0 0 0 6.771 6.771h-30.5a6.771 6.771 0 0 1-6.771-6.771V0a6.77 6.77 0 0 1 6.771-6.771h30.5A6.77 6.77 0 0 0 0 0"
transform="translate(434.394 123.074)"
fill="#8cc9f9"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-48.245v-67.734H6.039v61.695A6.039 6.039 0 0 1 0 0"
transform="translate(369.773 385.073)"
fill="#ff656f"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M351.528 385.073h-30v-67.734h30z"
fill="#ff4756"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h48.245a6.038 6.038 0 0 1 6.039 6.038V66.65H0Z"
transform="translate(321.528 116.303)"
fill="#23a8fe"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M351.528 182.953h-30v-66.65h30z"
fill="#0193ff"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M321.528 250.687h54.284v66.651h-54.284z"
fill="#fee55a"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M351.528 317.339h-30v-66.651h30z"
fill="#ffd301"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M321.528 182.953h54.284v67.734h-54.284z"
fill="#43cb8e"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M351.528 250.687h-30v-67.734h30z"
fill="#00ba66"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0c-8.254 0-14.944 6.69-14.944 14.944 0 8.253 6.69 14.944 14.944 14.944 8.253 0 14.944-6.691 14.944-14.944C14.944 6.69 8.253 0 0 0m0 55.953c-22.648 0-41.01-18.36-41.01-41.009S-22.648-26.065 0-26.065s41.009 18.36 41.009 41.009S22.648 55.953 0 55.953"
transform="translate(214.991 237.071)"
fill="#fee55a"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0c-4.619 2.542-7.751 7.453-7.751 13.099 0 5.644 3.132 10.554 7.751 13.097a41.123 41.123 0 0 0 23.026 24.74 40.875 40.875 0 0 1-15.833 3.171c-22.648 0-41.009-18.36-41.009-41.008 0-22.65 18.361-41.01 41.009-41.01a40.876 40.876 0 0 1 15.833 3.172A41.121 41.121 0 0 0 0 0"
transform="translate(207.798 238.917)"
fill="#ffd301"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-415.812c-22.327 0-40.594-18.268-40.594-40.594v-19.727h497v19.727C40.594-18.268 22.326 0 0 0Z"
transform="translate(463.906 504.5)"
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-18.917c0-6.881 5.63-12.512 12.511-12.512h155.277c6.881 0 12.511 5.631 12.511 12.512V0z"
transform="translate(75.701 444.179)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M75.701 394.396H7.5v49.782h68.201zM75.701 344.615H7.5v49.781h68.201zM75.701 294.834H7.5v49.781h68.201zM75.701 245.053H7.5v49.781h68.201zM75.701 195.271H7.5v49.781h68.201z"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M75.701 145.49H7.5v49.781h68.201z"
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-49.782h57.879c5.701 0 10.322 4.621 10.322 10.322V0Z"
transform="translate(7.5 145.49)"
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-259.516a6.039 6.039 0 0 1-6.039-6.039v-256.692a6.04 6.04 0 0 1 6.039-6.04H0a6.039 6.039 0 0 1 6.039 6.04V-6.039A6.038 6.038 0 0 1 0 0Z"
transform="translate(369.773 385.073)"
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-58.01c-22.326 0-40.594-18.268-40.594-40.594v-19.727H0Z"
transform="translate(106.103 504.5)"
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-55.269a6.772 6.772 0 0 1-6.772-6.772v-20.627a6.771 6.771 0 0 1 6.772-6.772H0a6.771 6.771 0 0 1 6.771 6.772v20.627A6.772 6.772 0 0 1 0 0Z"
transform="translate(465.935 383.99)"
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-55.269a6.772 6.772 0 0 1-6.772-6.771v-20.628a6.772 6.772 0 0 1 6.772-6.773H0a6.772 6.772 0 0 1 6.771 6.773v20.628A6.772 6.772 0 0 1 0 0Z"
transform="translate(465.935 325.611)"
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-55.269a6.772 6.772 0 0 1-6.772-6.772v-20.627a6.772 6.772 0 0 1 6.772-6.773H0a6.772 6.772 0 0 1 6.771 6.773v20.627A6.772 6.772 0 0 1 0 0Z"
transform="translate(465.935 267.232)"
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-55.269a6.771 6.771 0 0 1-6.772-6.771v-20.628a6.771 6.771 0 0 1 6.772-6.772H0a6.771 6.771 0 0 1 6.771 6.772v20.628A6.771 6.771 0 0 1 0 0Z"
transform="translate(465.935 208.852)"
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-55.269a6.772 6.772 0 0 1-6.772-6.771v-20.628a6.771 6.771 0 0 1 6.772-6.772H0a6.771 6.771 0 0 1 6.771 6.772v20.628A6.772 6.772 0 0 1 0 0Z"
transform="translate(465.935 150.474)"
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-48.245v-268.771H0a6.039 6.039 0 0 1 6.039 6.039V-6.039A6.038 6.038 0 0 1 0 0Z"
transform="translate(369.773 385.073)"
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-68.813"
transform="translate(382.694 150.474)"
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-134.385h48.245a6.038 6.038 0 0 1 6.039 6.038V0Z"
transform="translate(321.528 250.688)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M321.528 182.953h54.284v134.386h-54.284z"
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 0c0-8.253-6.69-14.943-14.943-14.943-8.254 0-14.945 6.69-14.945 14.943 0 8.254 6.691 14.944 14.945 14.944C-6.69 14.944 0 8.254 0 0Z"
transform="translate(229.935 252.015)"
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 0c0-22.648-18.36-41.009-41.009-41.009S-82.019-22.648-82.019 0c0 22.649 18.361 41.01 41.01 41.01C-18.36 41.01 0 22.649 0 0Z"
transform="translate(256 252.015)"
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 0c3.131 0 5.929 1.398 7.822 3.6l-65.701 46.182V0Z"
transform="translate(65.379 95.708)"
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 0h190.406C212.732 0 231 18.268 231 40.594v184.552"
transform="translate(273.5 7.5)"
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 0v196.26c0 22.326-18.268 40.594-40.594 40.594h-415.812c-22.326 0-40.594-18.268-40.594-40.594v-415.813c0-22.326 18.268-40.593 40.594-40.593H-266"
transform="translate(504.5 267.647)"
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