Box Multiple Checkmark icon

Use the Box Multiple Checkmark 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 { BoxMultipleCheckmark24Regular, BoxMultipleCheckmark24Filled } from "@fluentui/react-icons";

export function Example() {
  return <BoxMultipleCheckmark24Regular aria-label="Box Multiple Checkmark" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_box_multiple_checkmark_24_regular.svg" width="24" height="24" alt="Box Multiple Checkmark">

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.78 3.73716C15.2766 3.55115 14.7234 3.55115 14.22 3.73716L9.91334 5.32875C9.81518 5.36503 9.75 5.4586 9.75 5.56325V8.35645C9.25319 8.27702 8.7468 8.27702 8.25 8.35645V5.56325C8.25 4.83071 8.70625 4.17569 9.39337 3.92175L13.7001 2.33017C14.539 2.02015 15.461 2.02015 16.2999 2.33017L20.6066 3.92175C21.2937 4.17569 21.75 4.83071 21.75 5.56325V12.5808C21.2998 12.1914 20.7955 11.8628 20.25 11.6077V5.56325C20.25 5.4586 20.1848 5.36503 20.0867 5.32875L15.78 3.73716ZM14.6066 11.121C14.8077 11.1953 14.989 11.3039 15.1449 11.4388C14.5713 11.6619 14.0372 11.964 13.556 12.3319L9.77995 10.9364C9.27662 10.7504 8.72338 10.7504 8.22005 10.9364L3.91334 12.528C3.81518 12.5642 3.75 12.6578 3.75 12.7625V18.4325C3.75 18.5371 3.81518 18.6307 3.91334 18.667L8.22005 20.2586C8.72338 20.4446 9.27662 20.4446 9.77995 20.2586L11.3715 19.6704C11.5414 20.1498 11.7659 20.6033 12.0375 21.0234L10.2999 21.6656C9.46103 21.9756 8.53897 21.9756 7.70008 21.6656L3.39337 20.074C2.70625 19.8201 2.25 19.165 2.25 18.4325V12.7625C2.25 12.0299 2.70625 11.3749 3.39337 11.121L7.70008 9.52939C8.53897 9.21937 9.46103 9.21937 10.2999 9.52939L14.6066 11.121ZM11.7318 13.2499C11.9924 13.1595 12.269 13.2213 12.4647 13.3883C12.0907 13.8459 11.7778 14.3554 11.5385 14.9043L9.74989 15.5241V18.2234C9.74989 18.6376 9.4141 18.9734 8.99989 18.9734C8.58567 18.9734 8.24989 18.6376 8.24989 18.2234V15.5245L5.76921 14.6671C5.37772 14.5317 5.17006 14.1047 5.30538 13.7132C5.4407 13.3217 5.86776 13.114 6.25925 13.2494L8.99959 14.1966L11.7318 13.2499ZM11.7692 7.66706C11.3777 7.53174 11.1701 7.10468 11.3054 6.71319C11.4407 6.32171 11.8678 6.11404 12.2593 6.24936L14.9178 7.16832C14.9708 7.18663 15.0284 7.18661 15.0813 7.16826L17.7318 6.24986C18.1232 6.11424 18.5504 6.32158 18.686 6.71297C18.8216 7.10435 18.6143 7.53157 18.2229 7.66718L15.5725 8.58558C15.2017 8.71404 14.7986 8.7142 14.4278 8.58602L11.7692 7.66706ZM23 17.499C23 20.5366 20.5376 22.999 17.5 22.999C14.4624 22.999 12 20.5366 12 17.499C12 14.4615 14.4624 11.999 17.5 11.999C20.5376 11.999 23 14.4615 23 17.499ZM20.8536 15.1455C20.6583 14.9502 20.3417 14.9502 20.1464 15.1455L16.5 18.7919L14.8536 17.1455C14.6583 16.9502 14.3417 16.9502 14.1464 17.1455C13.9512 17.3407 13.9512 17.6573 14.1464 17.8526L16.1464 19.8526C16.3417 20.0478 16.6583 20.0478 16.8536 19.8526L20.8536 15.8526C21.0488 15.6573 21.0488 15.3407 20.8536 15.1455Z" 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/box_multiple_checkmark_24_regular.svg";

Details

Keywords

packageshippingcargoproduction