box icon

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

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

11 other variants in Fluent UI System Icons

box-16-filledbox-16-regularbox-20-filledbox-20-regularbox-24-filledbox-24-regularbox-28-filledbox-28-regularbox-32-filledbox-32-regularbox-48-regular

The same icon in other sets

boxAkar IconsboxBootstrap IconsboxBoxIcons v2boxBoxIcons v2 SolidboxCarbonboxElement PlusboxFont Awesome 6 SolidboxFont Awesome SolidboxFeather Iconsboxcss.ggboxHuge IconsboxHumbleiconsboxIconParkboxIconPark OutlineboxIconPark SolidboxIconPark TwoToneboxIconoirboxJam IconsboxLine AwesomeboxSVG LogosboxLucideboxMage IconsboxMajesticonsboxMaterial Symbols

Related icons in Fluent UI System Icons

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

Use the box 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.44v22.391a6 6 0 0 1-1.071-.32L6.672 37.163A4.25 4.25 0 0 1 4 33.219zm22.321 28.386q-.524.21-1.071.321V21.096l18.599-7.44c.099.361.151.739.151 1.125v18.438a4.25 4.25 0 0 1-2.672 3.945z"/></svg>

React

import type { SVGProps } from "react";

export function FluentBox48Filled(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.44v22.391a6 6 0 0 1-1.071-.32L6.672 37.163A4.25 4.25 0 0 1 4 33.219zm22.321 28.386q-.524.21-1.071.321V21.096l18.599-7.44c.099.361.151.739.151 1.125v18.438a4.25 4.25 0 0 1-2.672 3.945z"/></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.44v22.391a6 6 0 0 1-1.071-.32L6.672 37.163A4.25 4.25 0 0 1 4 33.219zm22.321 28.386q-.524.21-1.071.321V21.096l18.599-7.44c.099.361.151.739.151 1.125v18.438a4.25 4.25 0 0 1-2.672 3.945z"/></svg>
</template>

CSS

.icon-box-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.44v22.391a6%206%200%200%201-1.071-.32L6.672%2037.163A4.25%204.25%200%200%201%204%2033.219zm22.321%2028.386q-.524.21-1.071.321V21.096l18.599-7.44c.099.361.151.739.151%201.125v18.438a4.25%204.25%200%200%201-2.672%203.945z%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.44v22.391a6%206%200%200%201-1.071-.32L6.672%2037.163A4.25%204.25%200%200%201%204%2033.219zm22.321%2028.386q-.524.21-1.071.321V21.096l18.599-7.44c.099.361.151.739.151%201.125v18.438a4.25%204.25%200%200%201-2.672%203.945z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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