select color icon

select-color from Material Design Icons by Pictogrammers · Filled · Color · Apache-2.0 Free for personal and commercial use.

Name: select-color
Set: Material Design Icons
Style: Filled
Category: Color
Viewbox: 24×24
License: Apache 2.0
Aliases: select-colour

Use the select color icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M3.88 3c-.5.06-.88.5-.88 1v1h2V3zM7 3v2h2V3zm4 0v2h2V3zm4 0v2h2V3zm4 0v2h2V3.88c-.06-.5-.5-.88-1-.88zM3 7v2h2V7zm16 0v2h2V7zM3 11v2h2v-2zm16.31 1c-.13 0-.26.05-.36.14l-1.56 1.57l-.96-.96l-.71.71l.71.71l-4.46 4.46V21h2.38l4.45-4.46l.7.71l.72-.71l-.96-.96l1.56-1.55c.18-.2.18-.53 0-.72l-1.17-1.17a.48.48 0 0 0-.34-.14M3 15v2h2v-2zm14 0l.97.97L13.93 20l-.96-.96zM3 19v1.12c.06.5.5.88 1 .88h1v-2zm4 0v2h2v-2z"/></svg>

React

import type { SVGProps } from "react";

export function MdiSelectColor(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="M3.88 3c-.5.06-.88.5-.88 1v1h2V3zM7 3v2h2V3zm4 0v2h2V3zm4 0v2h2V3zm4 0v2h2V3.88c-.06-.5-.5-.88-1-.88zM3 7v2h2V7zm16 0v2h2V7zM3 11v2h2v-2zm16.31 1c-.13 0-.26.05-.36.14l-1.56 1.57l-.96-.96l-.71.71l.71.71l-4.46 4.46V21h2.38l4.45-4.46l.7.71l.72-.71l-.96-.96l1.56-1.55c.18-.2.18-.53 0-.72l-1.17-1.17a.48.48 0 0 0-.34-.14M3 15v2h2v-2zm14 0l.97.97L13.93 20l-.96-.96zM3 19v1.12c.06.5.5.88 1 .88h1v-2zm4 0v2h2v-2z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M3.88 3c-.5.06-.88.5-.88 1v1h2V3zM7 3v2h2V3zm4 0v2h2V3zm4 0v2h2V3zm4 0v2h2V3.88c-.06-.5-.5-.88-1-.88zM3 7v2h2V7zm16 0v2h2V7zM3 11v2h2v-2zm16.31 1c-.13 0-.26.05-.36.14l-1.56 1.57l-.96-.96l-.71.71l.71.71l-4.46 4.46V21h2.38l4.45-4.46l.7.71l.72-.71l-.96-.96l1.56-1.55c.18-.2.18-.53 0-.72l-1.17-1.17a.48.48 0 0 0-.34-.14M3 15v2h2v-2zm14 0l.97.97L13.93 20l-.96-.96zM3 19v1.12c.06.5.5.88 1 .88h1v-2zm4 0v2h2v-2z"/></svg>
</template>

CSS

.icon-select-color {
  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%22M3.88%203c-.5.06-.88.5-.88%201v1h2V3zM7%203v2h2V3zm4%200v2h2V3zm4%200v2h2V3zm4%200v2h2V3.88c-.06-.5-.5-.88-1-.88zM3%207v2h2V7zm16%200v2h2V7zM3%2011v2h2v-2zm16.31%201c-.13%200-.26.05-.36.14l-1.56%201.57l-.96-.96l-.71.71l.71.71l-4.46%204.46V21h2.38l4.45-4.46l.7.71l.72-.71l-.96-.96l1.56-1.55c.18-.2.18-.53%200-.72l-1.17-1.17a.48.48%200%200%200-.34-.14M3%2015v2h2v-2zm14%200l.97.97L13.93%2020l-.96-.96zM3%2019v1.12c.06.5.5.88%201%20.88h1v-2zm4%200v2h2v-2z%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%22M3.88%203c-.5.06-.88.5-.88%201v1h2V3zM7%203v2h2V3zm4%200v2h2V3zm4%200v2h2V3zm4%200v2h2V3.88c-.06-.5-.5-.88-1-.88zM3%207v2h2V7zm16%200v2h2V7zM3%2011v2h2v-2zm16.31%201c-.13%200-.26.05-.36.14l-1.56%201.57l-.96-.96l-.71.71l.71.71l-4.46%204.46V21h2.38l4.45-4.46l.7.71l.72-.71l-.96-.96l1.56-1.55c.18-.2.18-.53%200-.72l-1.17-1.17a.48.48%200%200%200-.34-.14M3%2015v2h2v-2zm14%200l.97.97L13.93%2020l-.96-.96zM3%2019v1.12c.06.5.5.88%201%20.88h1v-2zm4%200v2h2v-2z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/mdi/select-color.svg?color=%231a73e8&size=48

select color icon

More color icons from Material Design Icons

Use the select color icon

SVG

React

Vue

CSS