Checkbox 1 icon
Used for toggle selection states. The Checkbox 1 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 Checkbox 1 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 { Checkbox124Regular, Checkbox124Filled } from "@fluentui/react-icons";
export function Example() {
return <Checkbox124Regular aria-label="Checkbox 1" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_checkbox_1_24_regular.svg" width="24" height="24" alt="Checkbox 1"> 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="M6.25 3C4.45507 3 3 4.45507 3 6.25V17.75C3 19.5449 4.45507 21 6.25 21H17.75C18.3943 21 18.9949 20.8125 19.5001 20.4891V18.8316C19.337 18.9091 19.1653 18.9595 18.9913 18.9836C18.6743 19.3025 18.2352 19.5 17.75 19.5H6.25C5.2835 19.5 4.5 18.7165 4.5 17.75V6.25C4.5 5.2835 5.2835 4.5 6.25 4.5H17.75C18.7165 4.5 19.5 5.2835 19.5 6.25V14.409L20.1569 13.8835C20.3122 13.7592 20.4849 13.6643 20.6668 13.6C20.7752 13.5617 20.8868 13.5343 21 13.518V6.25C21 4.45507 19.5449 3 17.75 3H6.25ZM17.28 9.28064C17.5731 8.98791 17.5734 8.51304 17.2806 8.21998C16.9879 7.92691 16.513 7.92664 16.22 8.21936L9.99658 14.4356L7.78084 12.2197C7.48795 11.9268 7.01308 11.9268 6.72018 12.2196C6.42727 12.5125 6.42726 12.9874 6.72014 13.2803L9.46591 16.0262C9.75868 16.319 10.2333 16.3192 10.5263 16.0266L17.28 9.28064ZM21 14.5429C20.9222 14.5704 20.8482 14.611 20.7815 14.6643L18.2815 16.6644C17.9581 16.9231 17.9056 17.3951 18.1644 17.7185C18.4231 18.042 18.8951 18.0944 19.2185 17.8357L20.5 16.8105V21.25C20.5 21.6642 20.8358 22 21.25 22C21.6642 22 22 21.6642 22 21.25V15.25C22 14.9617 21.8348 14.6989 21.5749 14.574C21.392 14.4861 21.185 14.4775 21 14.5429Z" 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/checkbox_1_24_regular.svg";Details
| Name | Checkbox 1 |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_checkbox_1_24_regular.svg |
| Filled file | ic_fluent_checkbox_1_24_filled.svg |
| React components | Checkbox124Regular, Checkbox124Filled |
| License | MIT (© Microsoft Corporation) |