Multiselect RTL icon

Use the Multiselect RTL icon in React

Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.

npm install @fluentui/react-icons

import { MultiselectRtl24Regular, MultiselectRtl24Filled } from "@fluentui/react-icons";

export function Example() {
  return <MultiselectRtl24Regular aria-label="Multiselect RTL" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_multiselect_rtl_24_regular.svg" width="24" height="24" alt="Multiselect RTL">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.7803 4.78033C22.0732 4.48744 22.0732 4.01256 21.7803 3.71967C21.4874 3.42678 21.0126 3.42678 20.7197 3.71967L18.75 5.68934L18.2803 5.21967C17.9874 4.92678 17.5126 4.92678 17.2197 5.21967C16.9268 5.51256 16.9268 5.98744 17.2197 6.28033L18.2197 7.28033C18.5126 7.57322 18.9874 7.57322 19.2803 7.28033L21.7803 4.78033ZM2.75 18.0068H14.25C14.6642 18.0068 15 18.3426 15 18.7568C15 19.1365 14.7178 19.4503 14.3518 19.5L14.25 19.5068H2.75C2.33579 19.5068 2 19.1711 2 18.7568C2 18.3772 2.28215 18.0634 2.64823 18.0137L2.75 18.0068ZM2.75 11.5H14.25C14.6642 11.5 15 11.8358 15 12.25C15 12.6297 14.7178 12.9435 14.3518 12.9932L14.25 13H2.75C2.33579 13 2 12.6642 2 12.25C2 11.8703 2.28215 11.5565 2.64823 11.5068L2.75 11.5ZM2.75 5H14.25C14.6642 5 15 5.33579 15 5.75C15 6.1297 14.7178 6.44349 14.3518 6.49315L14.25 6.5H2.75C2.33579 6.5 2 6.16421 2 5.75C2 5.3703 2.28215 5.05651 2.64823 5.00685L2.75 5ZM21.7803 16.7197C22.0732 17.0126 22.0732 17.4874 21.7803 17.7803L19.2803 20.2803C18.9874 20.5732 18.5126 20.5732 18.2197 20.2803L17.2197 19.2803C16.9268 18.9874 16.9268 18.5126 17.2197 18.2197C17.5126 17.9268 17.9874 17.9268 18.2803 18.2197L18.75 18.6893L20.7197 16.7197C21.0126 16.4268 21.4874 16.4268 21.7803 16.7197Z" fill="currentColor"/></svg>

Use it from the SVG package

Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/multiselect_rtl_24_regular.svg";

Details