box-model-off icon

Box model off: box model off. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M15.003 14.5C15.003 14.636 14.953 14.754 14.854 14.854C14.754 14.953 14.636 15.003 14.5 15.003C14.364 15.003 14.246 14.953 14.146 14.854L13.293 14L13 14L13 13.707L10.259 10.966C10.175 10.989 10.089 11 10 11L5 11C4.724 11 4.488 10.902 4.293 10.707C4.098 10.512 4 10.276 4 10L4 5.793C4 5.652 4.048 5.533 4.144 5.437C4.241 5.341 4.359 5.293 4.5 5.293C4.532 5.293 4.563 5.295 4.593 5.3L1.293 2L1 2L1 1.557C0.998 1.538 0.997 1.519 0.997 1.5C0.997 1.481 0.998 1.462 1 1.443L1 1L1.443 1C1.462 0.998 1.481 0.997 1.5 0.997C1.636 0.997 1.754 1.047 1.854 1.146L14.854 14.146C14.953 14.246 15.003 14.364 15.003 14.5ZM9.293 10L8.293 9L6 9L6 6.707L4.992 5.7C4.997 5.729 5 5.761 5 5.793L5 10L9.293 10ZM3 1L4 1L4 2L3 1ZM6 1L6 2L5 2L5 1L6 1ZM7 2L7 1L8 1L8 2L7 2ZM10 1L10 2L9 2L9 1L10 1ZM11 2L11 1L12 1L12 2L11 2ZM14 1L14 2L13 2L13 1L14 1ZM1 3L2 3L2 4L1 4L1 3ZM13 3L14 3L14 4L13 4L13 3ZM10.856 7.856C10.759 7.952 10.641 8 10.5 8C10.359 8 10.241 7.952 10.144 7.856C10.048 7.759 10 7.641 10 7.5L10 5L7.5 5C7.359 5 7.241 4.952 7.144 4.856C7.048 4.759 7 4.641 7 4.5C7 4.359 7.048 4.241 7.144 4.144C7.241 4.048 7.359 4 7.5 4L10 4C10.276 4 10.512 4.098 10.707 4.293C10.902 4.488 11 4.724 11 5L11 7.5C11 7.641 10.952 7.759 10.856 7.856ZM1 5L2 5L2 6L1 6L1 5ZM14 5L14 6L13 6L13 5L14 5ZM1 7L2 7L2 8L1 8L1 7ZM13 8L13 7L14 7L14 8L13 8ZM1 9L2 9L2 10L1 10L1 9ZM14 9L14 10L13 10L13 9L14 9ZM1 11L2 11L2 12L1 12L1 11ZM13 11L14 11L14 12L13 11ZM2 14L1 14L1 13L2 13L2 14ZM4 13L4 14L3 14L3 13L4 13ZM6 13L6 14L5 14L5 13L6 13ZM8 14L7 14L7 13L8 13L8 14ZM10 13L10 14L9 14L9 13L10 13ZM12 13L12 14L11 14L11 13L12 13Z"/></svg>

React

// Gentleface "box-model-off" (line-round), MIT. https://gentleface.com/icons/box-model-off
import type { SVGProps } from 'react';

export function BoxModelOffIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M15.003 14.5C15.003 14.636 14.953 14.754 14.854 14.854C14.754 14.953 14.636 15.003 14.5 15.003C14.364 15.003 14.246 14.953 14.146 14.854L13.293 14L13 14L13 13.707L10.259 10.966C10.175 10.989 10.089 11 10 11L5 11C4.724 11 4.488 10.902 4.293 10.707C4.098 10.512 4 10.276 4 10L4 5.793C4 5.652 4.048 5.533 4.144 5.437C4.241 5.341 4.359 5.293 4.5 5.293C4.532 5.293 4.563 5.295 4.593 5.3L1.293 2L1 2L1 1.557C0.998 1.538 0.997 1.519 0.997 1.5C0.997 1.481 0.998 1.462 1 1.443L1 1L1.443 1C1.462 0.998 1.481 0.997 1.5 0.997C1.636 0.997 1.754 1.047 1.854 1.146L14.854 14.146C14.953 14.246 15.003 14.364 15.003 14.5ZM9.293 10L8.293 9L6 9L6 6.707L4.992 5.7C4.997 5.729 5 5.761 5 5.793L5 10L9.293 10ZM3 1L4 1L4 2L3 1ZM6 1L6 2L5 2L5 1L6 1ZM7 2L7 1L8 1L8 2L7 2ZM10 1L10 2L9 2L9 1L10 1ZM11 2L11 1L12 1L12 2L11 2ZM14 1L14 2L13 2L13 1L14 1ZM1 3L2 3L2 4L1 4L1 3ZM13 3L14 3L14 4L13 4L13 3ZM10.856 7.856C10.759 7.952 10.641 8 10.5 8C10.359 8 10.241 7.952 10.144 7.856C10.048 7.759 10 7.641 10 7.5L10 5L7.5 5C7.359 5 7.241 4.952 7.144 4.856C7.048 4.759 7 4.641 7 4.5C7 4.359 7.048 4.241 7.144 4.144C7.241 4.048 7.359 4 7.5 4L10 4C10.276 4 10.512 4.098 10.707 4.293C10.902 4.488 11 4.724 11 5L11 7.5C11 7.641 10.952 7.759 10.856 7.856ZM1 5L2 5L2 6L1 6L1 5ZM14 5L14 6L13 6L13 5L14 5ZM1 7L2 7L2 8L1 8L1 7ZM13 8L13 7L14 7L14 8L13 8ZM1 9L2 9L2 10L1 10L1 9ZM14 9L14 10L13 10L13 9L14 9ZM1 11L2 11L2 12L1 12L1 11ZM13 11L14 11L14 12L13 11ZM2 14L1 14L1 13L2 13L2 14ZM4 13L4 14L3 14L3 13L4 13ZM6 13L6 14L5 14L5 13L6 13ZM8 14L7 14L7 13L8 13L8 14ZM10 13L10 14L9 14L9 13L10 13ZM12 13L12 14L11 14L11 13L12 13Z" />
    </svg>
  );
}

Vue

Vue: see /icons/box-model-off.md

Svelte

Svelte: see /icons/box-model-off.md

HTML img

HTML img: see /icons/box-model-off.md

CSS

CSS: see /icons/box-model-off.md

Data URL

Data URL: see /icons/box-model-off.md

Sprite

Sprite: see /icons/box-model-off.md

SwiftUI

SwiftUI: see /icons/box-model-off.md

Compose

Compose: see /icons/box-model-off.md

Android XML

Android XML: see /icons/box-model-off.md

Flutter

Flutter: see /icons/box-model-off.md

Each icon is drawn on the 16 px grid, and most also on the 20 and 24 px grids (at 24 in three weights: light 1 px, regular 1.5 px, bold 2 px). Show the drawing made for your size, or an exact multiple of it, on whole pixels: 16 for 16 and 32 px, 20 for 20 and 40, 24 for 24 and 48. A size in between or a fractional position blurs it. The code on each icon page is the 16 px drawing, an SVG with fill="currentColor"; the icon page's downloads follow its Grid switch, and npm has the 20 and 24 px drawings too. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

Meaning

Use it for

box model off

Example

Box-model overlay hidden in an inspector

Built from

box-model + slash

Tags

box-model, css, margin, border, padding, content, devtools, layout, web, inspect, slash

Category

Design

Component name

BoxModelOffIcon

History

2026-11-12 added

Family 1

box-model

More design icons

align-horizontal-center align-objects-bottom align-objects-bottom-three align-objects-left align-objects-left-three align-objects-right align-objects-right-three align-objects-top align-objects-top-three align-vertical-center angle animation animation-off auto-layout-horizontal auto-layout-vertical auto-layout-wrap · all design icons

For agents

Metadata: /icons/box-model-off.json · Markdown: /icons/box-model-off.md · SVG: https://gentleface.com/svg/{style}/16/box-model-off.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/box-model-off.png

box-model-off icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp