Multiselect Icon
Free SVG icon from the Carbon Icons collection. Download or copy for use in any project.
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!