Multiselect Icon

Free SVG icon from the Carbon Icons collection. Download or copy for use in any project.

Download SVG

Collection: Carbon Icons
Format: SVG, React, Angular, Vue, Web Component, PNG
License: Apache-2.0 - Free for commercial use
Tags: multiselect

The Multiselect 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/321072.svg" alt="Multiselect icon" width="24" height="24">

React JSX

<img src="https://proicons.com/icon/321072.svg" alt="Multiselect icon" width={24} height={24} />

Vue template

<img
  src="https://proicons.com/icon/321072.svg"
  alt="Multiselect icon"
  :width="24"
  :height="24"
/>

CSS background

.icon-multiselect {
  background-image: url('https://proicons.com/icon/321072.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
  display: inline-block;
}

SVG markup

<svg width="640" height="360" viewBox="0 0 640 360" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="multi-select">
<g id="Group 25 Copy 2">
<path id="Shape" d="M431.75 113.25V102H429.25V113.25H418V115.75H429.25V127H431.75V115.75H443V113.25H431.75Z" fill="white"/>
<path id="Rectangle Copy 22" fill-rule="evenodd" clip-rule="evenodd" d="M144 82H496V130H144V82Z" fill="#DCDCDC"/>
<g id="Rectangle" filter="url(#filter0_d_0_3482)">
<rect x="148" y="146" width="348" height="132" fill="#D8D8D8"/>
</g>
<path id="Rectangle Copy 24" fill-rule="evenodd" clip-rule="evenodd" d="M144 130H496V178H144V130Z" fill="#F3F3F3"/>
<path id="Rectangle Copy 28" fill-rule="evenodd" clip-rule="evenodd" d="M144 176H496V228H144V176Z" fill="#F3F3F3"/>
<rect id="Rectangle 8" x="168" y="178" width="304" height="2" fill="#C6C6C6"/>
<path id="Rectangle Copy 29" fill-rule="evenodd" clip-rule="evenodd" d="M144 222H496V278H144V222Z" fill="#F3F3F3"/>
<rect id="Rectangle 8 Copy" x="168" y="228" width="304" height="2" fill="#C6C6C6"/>
<g id="icon/navigation/chevron/up/16">
<g id="Group">
<g id="chevron--up">
<path id="Mask" d="M460 101.5L467.5 109L466.44 110.06L460 103.621L453.561 110.06L452.5 109L460 101.5Z" fill="black"/>
<mask id="mask0_0_3482" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="452" y="101" width="16" height="10">
<path id="Mask_2" d="M460 101.5L467.5 109L466.44 110.06L460 103.621L453.561 110.06L452.5 109L460 101.5Z" fill="white"/>
</mask>
<g mask="url(#mask0_0_3482)">
<g id="color/gray/100">
<rect width="30" height="30" transform="translate(448 94) scale(2)" fill="#171717"/>
</g>
</g>
</g>
</g>
</g>
<rect id="Rectangle 3 Copy 5" x="228" y="102" width="132" height="10" fill="#8D8D8D"/>
<rect id="Rectangle_2" x="166" y="94" width="44" height="24" rx="6" fill="#161616"/>
<rect id="Rectangle 3 Copy 6" opacity="0.754768" x="206" y="150" width="198" height="10" fill="#A8A8A8"/>
<rect id="Rectangle 3 Copy 7" opacity="0.754768" x="206" y="200" width="150" height="10" fill="#A8A8A8"/>
<rect id="Rectangle 3 Copy 8" opacity="0.754768" x="206" y="250" width="198" height="10" fill="#A8A8A8"/>
</g>
<g id="icon/toggle/check-box/checked/filled/16 copy 3">
<g id="Group_2">
<g id="checkbox--checked--filled">
<g id="icon color 2">
<rect id="Mask_3" x="169" y="245" width="18" height="18" rx="2" fill="black"/>
<mask id="mask1_0_3482" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="169" y="245" width="18" height="18">
<rect id="Mask_4" x="169" y="245" width="18" height="18" rx="2" fill="white"/>
</mask>
<g mask="url(#mask1_0_3482)">
<g id="icon color 2_2">
<rect width="12" height="12" transform="translate(166 242) scale(2)" fill="black"/>
</g>
</g>
</g>
<g id="icon color 1">
<path id="Mask_5" d="M176.5 258.125L172.75 254.405L173.942 253.227L176.5 255.762L182.057 250.25L183.25 251.435L176.5 258.125Z" fill="white"/>
<mask id="mask2_0_3482" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="172" y="250" width="12" height="9">
<path id="Mask_6" d="M176.5 258.125L172.75 254.405L173.942 253.227L176.5 255.762L182.057 250.25L183.25 251.435L176.5 258.125Z" fill="white"/>
</mask>
<g mask="url(#mask2_0_3482)">
<g id="icon color 1_2">
<rect width="12" height="12" transform="translate(166 242) scale(2)" fill="white"/>
</g>
</g>
</g>
</g>
</g>
</g>
<g id="icon/toggle/check-box/checked/filled/16 copy 4">
<g id="checkbox">
<path id="Fill" fill-rule="evenodd" clip-rule="evenodd" d="M185.5 195H170.5C169.672 195 169 195.672 169 196.5V211.5C169 212.328 169.672 213 170.5 213H185.5C186.328 213 187 212.328 187 211.5V196.5C187 195.672 186.328 195 185.5 195ZM170.5 211.5V196.5H185.5V211.5H170.5Z" fill="black"/>
</g>
</g>
<g id="icon/toggle/check-box/checked/filled/16 copy 5">
<g id="checkbox_2">
<path id="Fill_2" fill-rule="evenodd" clip-rule="evenodd" d="M185.5 145H170.5C169.672 145 169 145.672 169 146.5V161.5C169 162.328 169.672 163 170.5 163H185.5C186.328 163 187 162.328 187 161.5V146.5C187 145.672 186.328 145 185.5 145ZM170.5 161.5V146.5H185.5V161.5H170.5Z" fill="black"/>
</g>
</g>
</g>
<defs>
<filter id="filter0_d_0_3482" x="136" y="138" width="372" height="156" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="3"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.862745 0 0 0 0 0.862745 0 0 0 0 0.862745 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_3482"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_3482" result="shape"/>
</filter>
</defs>
</svg>

Copied!

Multiselect Icon

More from Carbon Icons