color swatch icon
color-swatch-fill from Mage Icons by MageIcons · Fill · Apache-2.0 Free for personal and commercial use.
- Name
- color-swatch-fill
- Set
- Mage Icons
- Style
- Fill
- Viewbox
- 24×24
- License
- Apache 2.0
1 other variant in Mage Icons
The same icon in other sets
Related icons in Mage Icons
Use the color swatch icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20.893 12.84a3.23 3.23 0 0 0-1.796-.91l.639-.64c.3-.304.537-.664.698-1.06a3.2 3.2 0 0 0 0-2.48a3.2 3.2 0 0 0-.698-1.06l-2.564-2.56a3 3 0 0 0-.997-.71a3.24 3.24 0 0 0-2.484 0a3.1 3.1 0 0 0-.998.7l-.638.64a3.24 3.24 0 0 0-1.086-1.973A3.23 3.23 0 0 0 8.863 2H5.242a3.25 3.25 0 0 0-2.29.955A3.26 3.26 0 0 0 2 5.25v13.5c0 .862.342 1.689.95 2.298c.608.61 1.432.952 2.292.952h13.466a3.25 3.25 0 0 0 2.295-1A3.24 3.24 0 0 0 22 18.7v-3.58a3.25 3.25 0 0 0-1.107-2.28M6.928 19.35a2.34 2.34 0 0 1-2.166-1.45a2.36 2.36 0 0 1 .508-2.562A2.341 2.341 0 0 1 9.272 17c0 .623-.247 1.221-.687 1.662s-1.036.688-1.657.688m5.057-12.52l1.646-1.65c.162-.163.356-.293.569-.38c.426-.17.9-.17 1.326 0q.317.14.569.38l2.563 2.57a2 2 0 0 1 .38.57a1.8 1.8 0 0 1 0 1.34c-.09.21-.219.4-.38.56l-6.673 6.7z"/><path fill="currentColor" d="M7.795 17a.852.852 0 0 1-1.007.845a.85.85 0 0 1-.671-.665a.852.852 0 0 1 .83-1.02a.847.847 0 0 1 .848.84"/></svg>
React
import type { SVGProps } from "react";
export function MageColorSwatchFill(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20.893 12.84a3.23 3.23 0 0 0-1.796-.91l.639-.64c.3-.304.537-.664.698-1.06a3.2 3.2 0 0 0 0-2.48a3.2 3.2 0 0 0-.698-1.06l-2.564-2.56a3 3 0 0 0-.997-.71a3.24 3.24 0 0 0-2.484 0a3.1 3.1 0 0 0-.998.7l-.638.64a3.24 3.24 0 0 0-1.086-1.973A3.23 3.23 0 0 0 8.863 2H5.242a3.25 3.25 0 0 0-2.29.955A3.26 3.26 0 0 0 2 5.25v13.5c0 .862.342 1.689.95 2.298c.608.61 1.432.952 2.292.952h13.466a3.25 3.25 0 0 0 2.295-1A3.24 3.24 0 0 0 22 18.7v-3.58a3.25 3.25 0 0 0-1.107-2.28M6.928 19.35a2.34 2.34 0 0 1-2.166-1.45a2.36 2.36 0 0 1 .508-2.562A2.341 2.341 0 0 1 9.272 17c0 .623-.247 1.221-.687 1.662s-1.036.688-1.657.688m5.057-12.52l1.646-1.65c.162-.163.356-.293.569-.38c.426-.17.9-.17 1.326 0q.317.14.569.38l2.563 2.57a2 2 0 0 1 .38.57a1.8 1.8 0 0 1 0 1.34c-.09.21-.219.4-.38.56l-6.673 6.7z"/><path fill="currentColor" d="M7.795 17a.852.852 0 0 1-1.007.845a.85.85 0 0 1-.671-.665a.852.852 0 0 1 .83-1.02a.847.847 0 0 1 .848.84"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20.893 12.84a3.23 3.23 0 0 0-1.796-.91l.639-.64c.3-.304.537-.664.698-1.06a3.2 3.2 0 0 0 0-2.48a3.2 3.2 0 0 0-.698-1.06l-2.564-2.56a3 3 0 0 0-.997-.71a3.24 3.24 0 0 0-2.484 0a3.1 3.1 0 0 0-.998.7l-.638.64a3.24 3.24 0 0 0-1.086-1.973A3.23 3.23 0 0 0 8.863 2H5.242a3.25 3.25 0 0 0-2.29.955A3.26 3.26 0 0 0 2 5.25v13.5c0 .862.342 1.689.95 2.298c.608.61 1.432.952 2.292.952h13.466a3.25 3.25 0 0 0 2.295-1A3.24 3.24 0 0 0 22 18.7v-3.58a3.25 3.25 0 0 0-1.107-2.28M6.928 19.35a2.34 2.34 0 0 1-2.166-1.45a2.36 2.36 0 0 1 .508-2.562A2.341 2.341 0 0 1 9.272 17c0 .623-.247 1.221-.687 1.662s-1.036.688-1.657.688m5.057-12.52l1.646-1.65c.162-.163.356-.293.569-.38c.426-.17.9-.17 1.326 0q.317.14.569.38l2.563 2.57a2 2 0 0 1 .38.57a1.8 1.8 0 0 1 0 1.34c-.09.21-.219.4-.38.56l-6.673 6.7z"/><path fill="currentColor" d="M7.795 17a.852.852 0 0 1-1.007.845a.85.85 0 0 1-.671-.665a.852.852 0 0 1 .83-1.02a.847.847 0 0 1 .848.84"/></svg> </template>
CSS
.icon-color-swatch-fill {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M20.893%2012.84a3.23%203.23%200%200%200-1.796-.91l.639-.64c.3-.304.537-.664.698-1.06a3.2%203.2%200%200%200%200-2.48a3.2%203.2%200%200%200-.698-1.06l-2.564-2.56a3%203%200%200%200-.997-.71a3.24%203.24%200%200%200-2.484%200a3.1%203.1%200%200%200-.998.7l-.638.64a3.24%203.24%200%200%200-1.086-1.973A3.23%203.23%200%200%200%208.863%202H5.242a3.25%203.25%200%200%200-2.29.955A3.26%203.26%200%200%200%202%205.25v13.5c0%20.862.342%201.689.95%202.298c.608.61%201.432.952%202.292.952h13.466a3.25%203.25%200%200%200%202.295-1A3.24%203.24%200%200%200%2022%2018.7v-3.58a3.25%203.25%200%200%200-1.107-2.28M6.928%2019.35a2.34%202.34%200%200%201-2.166-1.45a2.36%202.36%200%200%201%20.508-2.562A2.341%202.341%200%200%201%209.272%2017c0%20.623-.247%201.221-.687%201.662s-1.036.688-1.657.688m5.057-12.52l1.646-1.65c.162-.163.356-.293.569-.38c.426-.17.9-.17%201.326%200q.317.14.569.38l2.563%202.57a2%202%200%200%201%20.38.57a1.8%201.8%200%200%201%200%201.34c-.09.21-.219.4-.38.56l-6.673%206.7z%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M7.795%2017a.852.852%200%200%201-1.007.845a.85.85%200%200%201-.671-.665a.852.852%200%200%201%20.83-1.02a.847.847%200%200%201%20.848.84%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M20.893%2012.84a3.23%203.23%200%200%200-1.796-.91l.639-.64c.3-.304.537-.664.698-1.06a3.2%203.2%200%200%200%200-2.48a3.2%203.2%200%200%200-.698-1.06l-2.564-2.56a3%203%200%200%200-.997-.71a3.24%203.24%200%200%200-2.484%200a3.1%203.1%200%200%200-.998.7l-.638.64a3.24%203.24%200%200%200-1.086-1.973A3.23%203.23%200%200%200%208.863%202H5.242a3.25%203.25%200%200%200-2.29.955A3.26%203.26%200%200%200%202%205.25v13.5c0%20.862.342%201.689.95%202.298c.608.61%201.432.952%202.292.952h13.466a3.25%203.25%200%200%200%202.295-1A3.24%203.24%200%200%200%2022%2018.7v-3.58a3.25%203.25%200%200%200-1.107-2.28M6.928%2019.35a2.34%202.34%200%200%201-2.166-1.45a2.36%202.36%200%200%201%20.508-2.562A2.341%202.341%200%200%201%209.272%2017c0%20.623-.247%201.221-.687%201.662s-1.036.688-1.657.688m5.057-12.52l1.646-1.65c.162-.163.356-.293.569-.38c.426-.17.9-.17%201.326%200q.317.14.569.38l2.563%202.57a2%202%200%200%201%20.38.57a1.8%201.8%200%200%201%200%201.34c-.09.21-.219.4-.38.56l-6.673%206.7z%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M7.795%2017a.852.852%200%200%201-1.007.845a.85.85%200%200%201-.671-.665a.852.852%200%200%201%20.83-1.02a.847.847%200%200%201%20.848.84%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/mage/color-swatch-fill.svg?color=%231a73e8&size=48
