Select All On icon
Used for toggle selection states. Contains state variants. The Select All On icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Select All On 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 { SelectAllOn24Regular, SelectAllOn24Filled } from "@fluentui/react-icons";
export function Example() {
return <SelectAllOn24Regular aria-label="Select All On" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_select_all_on_24_regular.svg" width="24" height="24" alt="Select All On"> 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="M15.2803 9.03033C15.5732 8.73744 15.5732 8.26256 15.2803 7.96967C14.9874 7.67678 14.5126 7.67678 14.2197 7.96967L10 12.1893L8.03033 10.2197C7.73744 9.92678 7.26256 9.92678 6.96967 10.2197C6.67678 10.5126 6.67678 10.9874 6.96967 11.2803L9.46967 13.7803C9.76256 14.0732 10.2374 14.0732 10.5303 13.7803L15.2803 9.03033ZM3 6.25C3 4.45507 4.45507 3 6.25 3H15.75C17.5449 3 19 4.45507 19 6.25V15.75C19 17.5449 17.5449 19 15.75 19H6.25C4.45507 19 3 17.5449 3 15.75V6.25ZM6.25 4.5C5.2835 4.5 4.5 5.2835 4.5 6.25V15.75C4.5 16.7165 5.2835 17.5 6.25 17.5H15.75C16.7165 17.5 17.5 16.7165 17.5 15.75V6.25C17.5 5.2835 16.7165 4.5 15.75 4.5H6.25ZM9.24118 21.5C8.08967 21.5 7.07793 20.9016 6.5 19.9987H9.21565L9.24118 19.9989H16.2462C18.3188 19.9989 19.9989 18.3188 19.9989 16.2462V6.5C20.9016 7.07796 21.5 8.08964 21.5 9.24108V16.2462C21.5 19.1478 19.1478 21.5 16.2462 21.5H9.24118Z" 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/select_all_on_24_regular.svg";Details
| Name | Select All On |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_select_all_on_24_regular.svg |
| Filled file | ic_fluent_select_all_on_24_filled.svg |
| React components | SelectAllOn24Regular, SelectAllOn24Filled |
| License | MIT (© Microsoft Corporation) |