box checkmark icon

box-checkmark-48-filled from Fluent UI System Icons by Microsoft Corporation · 48 Filled · MIT Free for personal and commercial use.

Name: box-checkmark-48-filled
Set: Fluent UI System Icons
Style: 48 Filled
Viewbox: 48×48
License: MIT

11 other variants in Fluent UI System Icons

box-checkmark-16-filled box-checkmark-16-regular box-checkmark-20-filled box-checkmark-20-regular box-checkmark-24-filled box-checkmark-24-regular box-checkmark-28-filled box-checkmark-28-regular box-checkmark-32-filled box-checkmark-32-regular box-checkmark-48-regular

Related icons in Fluent UI System Icons

box-arrow-left-20-filled box-arrow-up-20-filled box-dismiss-20-filled box-edit-20-filled box-multiple-20-filled box-multiple-arrow-left-20-filled box-multiple-arrow-right-20-filled box-multiple-checkmark-20-filled box-multiple-search-20-filled box-search-16-filled box-toolbox-20-filled

Use the box checkmark icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="currentColor" d="M26.321 4.832a6.25 6.25 0 0 0-4.642 0l-5.29 2.116l18.738 7.505l7.344-2.938a4.3 4.3 0 0 0-1.143-.68zm5.442 10.967L13.024 8.294l-6.352 2.54c-.422.17-.806.4-1.143.681L24 18.904zM4 14.78c0-.386.052-.764.151-1.124l18.599 7.44v9.54A13 13 0 0 0 22 35c0 1.53.264 2.999.75 4.362v4.126a6 6 0 0 1-1.071-.32L6.672 37.163A4.25 4.25 0 0 1 4 33.219zM35 22c3.493 0 6.664 1.378 9 3.62V14.78c0-.385-.052-.763-.151-1.123l-18.599 7.44V26.4A12.97 12.97 0 0 1 35 22m11 13c0 6.075-4.925 11-11 11s-11-4.925-11-11s4.925-11 11-11s11 4.925 11 11m-12.293 4.707l8-8a1 1 0 0 0-1.414-1.414L33 37.586l-3.293-3.293a1 1 0 0 0-1.414 1.414l4 4a1 1 0 0 0 1.414 0"/></svg>

React

import type { SVGProps } from "react";

export function FluentBoxCheckmark48Filled(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="currentColor" d="M26.321 4.832a6.25 6.25 0 0 0-4.642 0l-5.29 2.116l18.738 7.505l7.344-2.938a4.3 4.3 0 0 0-1.143-.68zm5.442 10.967L13.024 8.294l-6.352 2.54c-.422.17-.806.4-1.143.681L24 18.904zM4 14.78c0-.386.052-.764.151-1.124l18.599 7.44v9.54A13 13 0 0 0 22 35c0 1.53.264 2.999.75 4.362v4.126a6 6 0 0 1-1.071-.32L6.672 37.163A4.25 4.25 0 0 1 4 33.219zM35 22c3.493 0 6.664 1.378 9 3.62V14.78c0-.385-.052-.763-.151-1.123l-18.599 7.44V26.4A12.97 12.97 0 0 1 35 22m11 13c0 6.075-4.925 11-11 11s-11-4.925-11-11s4.925-11 11-11s11 4.925 11 11m-12.293 4.707l8-8a1 1 0 0 0-1.414-1.414L33 37.586l-3.293-3.293a1 1 0 0 0-1.414 1.414l4 4a1 1 0 0 0 1.414 0"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="currentColor" d="M26.321 4.832a6.25 6.25 0 0 0-4.642 0l-5.29 2.116l18.738 7.505l7.344-2.938a4.3 4.3 0 0 0-1.143-.68zm5.442 10.967L13.024 8.294l-6.352 2.54c-.422.17-.806.4-1.143.681L24 18.904zM4 14.78c0-.386.052-.764.151-1.124l18.599 7.44v9.54A13 13 0 0 0 22 35c0 1.53.264 2.999.75 4.362v4.126a6 6 0 0 1-1.071-.32L6.672 37.163A4.25 4.25 0 0 1 4 33.219zM35 22c3.493 0 6.664 1.378 9 3.62V14.78c0-.385-.052-.763-.151-1.123l-18.599 7.44V26.4A12.97 12.97 0 0 1 35 22m11 13c0 6.075-4.925 11-11 11s-11-4.925-11-11s4.925-11 11-11s11 4.925 11 11m-12.293 4.707l8-8a1 1 0 0 0-1.414-1.414L33 37.586l-3.293-3.293a1 1 0 0 0-1.414 1.414l4 4a1 1 0 0 0 1.414 0"/></svg>
</template>

CSS

.icon-box-checkmark-48-filled {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M26.321%204.832a6.25%206.25%200%200%200-4.642%200l-5.29%202.116l18.738%207.505l7.344-2.938a4.3%204.3%200%200%200-1.143-.68zm5.442%2010.967L13.024%208.294l-6.352%202.54c-.422.17-.806.4-1.143.681L24%2018.904zM4%2014.78c0-.386.052-.764.151-1.124l18.599%207.44v9.54A13%2013%200%200%200%2022%2035c0%201.53.264%202.999.75%204.362v4.126a6%206%200%200%201-1.071-.32L6.672%2037.163A4.25%204.25%200%200%201%204%2033.219zM35%2022c3.493%200%206.664%201.378%209%203.62V14.78c0-.385-.052-.763-.151-1.123l-18.599%207.44V26.4A12.97%2012.97%200%200%201%2035%2022m11%2013c0%206.075-4.925%2011-11%2011s-11-4.925-11-11s4.925-11%2011-11s11%204.925%2011%2011m-12.293%204.707l8-8a1%201%200%200%200-1.414-1.414L33%2037.586l-3.293-3.293a1%201%200%200%200-1.414%201.414l4%204a1%201%200%200%200%201.414%200%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M26.321%204.832a6.25%206.25%200%200%200-4.642%200l-5.29%202.116l18.738%207.505l7.344-2.938a4.3%204.3%200%200%200-1.143-.68zm5.442%2010.967L13.024%208.294l-6.352%202.54c-.422.17-.806.4-1.143.681L24%2018.904zM4%2014.78c0-.386.052-.764.151-1.124l18.599%207.44v9.54A13%2013%200%200%200%2022%2035c0%201.53.264%202.999.75%204.362v4.126a6%206%200%200%201-1.071-.32L6.672%2037.163A4.25%204.25%200%200%201%204%2033.219zM35%2022c3.493%200%206.664%201.378%209%203.62V14.78c0-.385-.052-.763-.151-1.123l-18.599%207.44V26.4A12.97%2012.97%200%200%201%2035%2022m11%2013c0%206.075-4.925%2011-11%2011s-11-4.925-11-11s4.925-11%2011-11s11%204.925%2011%2011m-12.293%204.707l8-8a1%201%200%200%200-1.414-1.414L33%2037.586l-3.293-3.293a1%201%200%200%200-1.414%201.414l4%204a1%201%200%200%200%201.414%200%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/box-checkmark-48-filled.svg?color=%231a73e8&size=48