Skip to content
tablericons

shape

Box Align Top Left icon

Download the Box Align Top Left icon as free SVG or PNG. Compare outline and filled styles. Copy React, Vue or Svelte code.

  • alignment
  • position
  • layout
  • corner
  • align-box
  • flexbox
  • placement
  • anchor
  • box
  • align
Style
Size
Stroke
Color
Download SVG

Press C to copy SVG, J for JSX, D to download.

Category
shape
Styles
Outline, filled
Component
IconBoxAlignTopLeft
License
MIT · Paweł Kuna

Code

Copy it the way you use it

box-align-top-left.svg
<svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
 
>
  <path d="M11 5v5a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1v-5a1 1 0 0 1 1 -1h5a1 1 0 0 1 1 1" />
  <path d="M15 4h-.01" />
  <path d="M20 4h-.01" />
  <path d="M20 9h-.01" />
  <path d="M20 15h-.01" />
  <path d="M4 15h-.01" />
  <path d="M20 20h-.01" />
  <path d="M15 20h-.01" />
  <path d="M9 20h-.01" />
  <path d="M4 20h-.01" />
</svg>

Use the Box Align Top Left icon

For a decorative icon beside text, add aria-hidden="true" to the SVG. For an icon-only control, put its accessible name on the button or link.

React example
import { IconBoxAlignTopLeft } from '@tabler/icons-react';

<IconBoxAlignTopLeft size={24} stroke={2} />
Read the React guide
Vue example
import { IconBoxAlignTopLeft } from '@tabler/icons-vue';

<IconBoxAlignTopLeft :size="24" :stroke="2" />
Read the Vue guide
Svelte 5 example
import { IconBoxAlignTopLeft } from '@tabler/icons-svelte-runes';

<IconBoxAlignTopLeft size={24} stroke={2} />
Read the Svelte guide

Related

Related icons

See all 486 shape icons