Checkbox 2 icon
Used for toggle selection states. The Checkbox 2 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 2 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 { Checkbox224Regular, Checkbox224Filled } from "@fluentui/react-icons";
export function Example() {
return <Checkbox224Regular aria-label="Checkbox 2" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_checkbox_2_24_regular.svg" width="24" height="24" alt="Checkbox 2"> 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 21H16.257C16.2898 20.4191 16.4358 19.9233 16.6431 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.25V13.5C19.7262 13.4999 19.9523 13.521 20.1747 13.5647C20.452 13.6192 20.7316 13.7108 21 13.845V6.25C21 4.45507 19.5449 3 17.75 3H6.25ZM17.8075 19.4991C17.521 19.8943 17.3053 20.3818 17.2592 21C17.2531 21.0811 17.25 21.1644 17.25 21.2501C17.25 21.6643 17.5858 22.0001 18 22.0001H21C21.4142 22.0001 21.75 21.6643 21.75 21.2501C21.75 20.8358 21.4142 20.5001 21 20.5001H18.9428C19.1384 20.1686 19.478 19.8962 19.9396 19.5623C19.9677 19.542 19.9966 19.5212 20.0263 19.5C20.0409 19.4895 20.0557 19.479 20.0707 19.4683C20.2893 19.3124 20.5433 19.1312 20.7866 18.9108C21.2914 18.4536 21.75 17.8278 21.75 16.9096C21.75 16.276 21.5822 15.7258 21.2455 15.3011C21.1694 15.2052 21.0872 15.1187 21 15.0413C20.7012 14.7761 20.3448 14.6172 19.982 14.546C19.824 14.5149 19.6624 14.4999 19.5 14.5C18.7366 14.5004 17.9561 14.8347 17.4421 15.4067C17.1653 15.7148 17.1906 16.189 17.4987 16.4658C17.8068 16.7427 18.281 16.7173 18.5579 16.4092C18.7889 16.1522 19.1647 16.0004 19.5 16C19.5664 15.9999 19.6312 16.0057 19.693 16.0179C19.8618 16.051 19.9851 16.1258 20.0701 16.233C20.1553 16.3405 20.25 16.5415 20.25 16.9096C20.25 17.3585 20.0161 17.628 19.476 18.0405C19.3535 18.134 19.2153 18.2349 19.0604 18.3469C18.666 18.6323 18.1776 18.9887 17.8075 19.4991ZM17.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.28064Z" 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_2_24_regular.svg";Details
| Name | Checkbox 2 |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_checkbox_2_24_regular.svg |
| Filled file | ic_fluent_checkbox_2_24_filled.svg |
| React components | Checkbox224Regular, Checkbox224Filled |
| License | MIT (© Microsoft Corporation) |