Color Swatch Icon
Free SVG icon from the Mage Icons collection. Download or copy for use in any project.
The Color Swatch icon is available as a free SVG and is ready to drop into any web or app project.
img tag
<img src="https://proicons.com/icon/310061.svg" alt="Color Swatch icon" width="24" height="24">
React JSX
<img src="https://proicons.com/icon/310061.svg" alt="Color Swatch icon" width={24} height={24} />
Vue template
<img src="https://proicons.com/icon/310061.svg" alt="Color Swatch icon" :width="24" :height="24" />
CSS background
.icon-color-swatch {
background-image: url('https://proicons.com/icon/310061.svg');
background-size: contain;
background-repeat: no-repeat;
width: 24px;
height: 24px;
display: inline-block;
}
SVG markup
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20.8928 12.84C20.4061 12.3529 19.7771 12.0341 19.0972 11.93L19.7356 11.29C20.0355 10.986 20.2728 10.6258 20.434 10.23C20.5986 9.83742 20.6833 9.41586 20.6833 8.99001C20.6833 8.56415 20.5986 8.14258 20.434 7.75C20.2752 7.35293 20.0376 6.99231 19.7356 6.69L17.1721 4.13C16.8919 3.827 16.5523 3.58528 16.1746 3.42C15.3793 3.09053 14.4861 3.09053 13.6908 3.42C13.3156 3.58521 12.9766 3.8231 12.6933 4.12L12.0549 4.75999C11.9403 3.99315 11.5551 3.29295 10.9694 2.78651C10.3837 2.28008 9.63622 2.00102 8.86275 2H5.24191C4.38291 2.00264 3.55974 2.3459 2.95233 2.95482C2.34493 3.56374 2.00263 4.38886 2 5.25V18.75C2 19.612 2.34156 20.4386 2.94953 21.0481C3.55751 21.6576 4.3821 22 5.24191 22H18.7083C19.1375 21.9929 19.5611 21.9009 19.9548 21.7293C20.3485 21.5577 20.7045 21.3098 21.0025 21C21.3129 20.7023 21.561 20.3456 21.7322 19.9507C21.9035 19.5558 21.9945 19.1306 22 18.7V15.12C21.9779 14.6848 21.8684 14.2587 21.6782 13.8669C21.4879 13.4751 21.2208 13.1259 20.8928 12.84ZM6.92764 19.35C6.46401 19.35 6.01084 19.2122 5.62535 18.9539C5.23986 18.6957 4.93933 18.3287 4.7619 17.8993C4.58448 17.4699 4.53812 16.9974 4.62857 16.5415C4.71902 16.0857 4.9422 15.667 5.27004 15.3383C5.59787 15.0096 6.01557 14.7858 6.47029 14.6952C6.92501 14.6045 7.39636 14.651 7.82469 14.8289C8.25303 15.0068 8.61918 15.308 8.87675 15.6944C9.13433 16.0809 9.27176 16.5352 9.27176 17C9.27176 17.6233 9.02486 18.221 8.58525 18.6617C8.14563 19.1024 7.54935 19.35 6.92764 19.35ZM11.985 6.83L13.6309 5.17999C13.7932 5.0166 13.9866 4.88741 14.1995 4.8C14.6255 4.63021 15.1002 4.63021 15.5262 4.8C15.7361 4.89294 15.9284 5.02149 16.0947 5.17999L18.6584 7.75C18.8165 7.91673 18.9447 8.10955 19.0374 8.31999C19.1254 8.53224 19.1695 8.76018 19.1671 8.99001C19.1684 9.21973 19.1243 9.44744 19.0374 9.66C18.9477 9.86913 18.8191 10.0592 18.6584 10.22L11.985 16.92V6.83Z" fill="black"/> <path d="M7.79546 17C7.79744 17.1686 7.74946 17.3339 7.6575 17.475C7.56554 17.6161 7.4338 17.7265 7.27905 17.7924C7.1243 17.8583 6.95346 17.8766 6.78833 17.8449C6.62321 17.8132 6.47126 17.7331 6.35168 17.6146C6.2321 17.4961 6.15032 17.3447 6.11679 17.1796C6.08326 17.0144 6.09943 16.843 6.1633 16.6871C6.22718 16.5312 6.33587 16.3978 6.47551 16.304C6.61516 16.2102 6.77948 16.16 6.9476 16.16C7.17076 16.16 7.38492 16.2482 7.54365 16.4054C7.70237 16.5627 7.79284 16.7763 7.79546 17Z" fill="black"/> </svg>
More from Mage Icons
View all
Color Swatch in other icon packs
Copied!