# auto-layout-wrap icon

Auto layout wrap. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/auto-layout-wrap

- Category: Design
- Use it for: auto layout wrap, flex wrap, wrap items
- Tags: auto layout, wrap, flex wrap, flexbox, wrap items, rows, flow, items, grid, figma, design tool, ui design, layout
- Family: auto-layout-horizontal, auto-layout-vertical
- Component name: AutoLayoutWrapIcon
- Added: 2026-10-19

## Don't confuse with

- `text-wrap`: wraps lines of text, not the items of a layout

## Files

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it.

- line-round: https://gentleface.com/svg/line-round/16/auto-layout-wrap.svg · PNG https://gentleface.com/png/line-round/16/auto-layout-wrap.png · https://gentleface.com/png/line-round/32/auto-layout-wrap.png · https://gentleface.com/png/line-round/48/auto-layout-wrap.png
- line-soft: https://gentleface.com/svg/line-soft/16/auto-layout-wrap.svg · PNG https://gentleface.com/png/line-soft/16/auto-layout-wrap.png · https://gentleface.com/png/line-soft/32/auto-layout-wrap.png · https://gentleface.com/png/line-soft/48/auto-layout-wrap.png
- line-sharp: https://gentleface.com/svg/line-sharp/16/auto-layout-wrap.svg · PNG https://gentleface.com/png/line-sharp/16/auto-layout-wrap.png · https://gentleface.com/png/line-sharp/32/auto-layout-wrap.png · https://gentleface.com/png/line-sharp/48/auto-layout-wrap.png
- solid-round: https://gentleface.com/svg/solid-round/16/auto-layout-wrap.svg · PNG https://gentleface.com/png/solid-round/16/auto-layout-wrap.png · https://gentleface.com/png/solid-round/32/auto-layout-wrap.png · https://gentleface.com/png/solid-round/48/auto-layout-wrap.png
- solid-soft: https://gentleface.com/svg/solid-soft/16/auto-layout-wrap.svg · PNG https://gentleface.com/png/solid-soft/16/auto-layout-wrap.png · https://gentleface.com/png/solid-soft/32/auto-layout-wrap.png · https://gentleface.com/png/solid-soft/48/auto-layout-wrap.png
- solid-sharp: https://gentleface.com/svg/solid-sharp/16/auto-layout-wrap.svg · PNG https://gentleface.com/png/solid-sharp/16/auto-layout-wrap.png · https://gentleface.com/png/solid-sharp/32/auto-layout-wrap.png · https://gentleface.com/png/solid-sharp/48/auto-layout-wrap.png

The SVG of every style: https://gentleface.com/icons/auto-layout-wrap.json (`svg`).

## Code (line-round)

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. For another style, take its SVG from the JSON and swap the path `d`.

### SVG

```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="M5.707 5.707C5.512 5.902 5.276 6 5 6L2 6C1.724 6 1.488 5.902 1.293 5.707C1.098 5.512 1 5.276 1 5L1 2C1 1.724 1.098 1.488 1.293 1.293C1.488 1.098 1.724 1 2 1L5 1C5.276 1 5.512 1.098 5.707 1.293C5.902 1.488 6 1.724 6 2L6 5C6 5.276 5.902 5.512 5.707 5.707ZM11.707 1.293C11.902 1.488 12 1.724 12 2L12 5C12 5.276 11.902 5.512 11.707 5.707C11.512 5.902 11.276 6 11 6L8 6C7.724 6 7.488 5.902 7.293 5.707C7.098 5.512 7 5.276 7 5L7 2C7 1.724 7.098 1.488 7.293 1.293C7.488 1.098 7.724 1 8 1L11 1C11.276 1 11.512 1.098 11.707 1.293ZM14.707 11.707C14.512 11.902 14.276 12 14 12L9.707 12L11.854 14.146C11.953 14.246 12.003 14.364 12.003 14.5C12.003 14.636 11.953 14.754 11.854 14.854C11.754 14.953 11.636 15.003 11.5 15.003C11.364 15.003 11.246 14.953 11.146 14.854L8.146 11.854C8.047 11.754 7.997 11.636 7.997 11.5C7.997 11.364 8.047 11.246 8.146 11.146L11.146 8.146C11.246 8.047 11.364 7.997 11.5 7.997C11.636 7.997 11.754 8.047 11.854 8.146C11.953 8.246 12.003 8.364 12.003 8.5C12.003 8.636 11.953 8.754 11.854 8.854L9.707 11L14 11L14 1.5C14 1.359 14.048 1.241 14.144 1.144C14.241 1.048 14.359 1 14.5 1C14.641 1 14.759 1.048 14.856 1.144C14.952 1.241 15 1.359 15 1.5L15 11C15 11.276 14.902 11.512 14.707 11.707ZM5 5L5 2L2 2L2 5L5 5ZM8 5L11 5L11 2L8 2L8 5ZM5.707 13.707C5.512 13.902 5.276 14 5 14L2 14C1.724 14 1.488 13.902 1.293 13.707C1.098 13.512 1 13.276 1 13L1 10C1 9.724 1.098 9.488 1.293 9.293C1.488 9.098 1.724 9 2 9L5 9C5.276 9 5.512 9.098 5.707 9.293C5.902 9.488 6 9.724 6 10L6 13C6 13.276 5.902 13.512 5.707 13.707ZM5 13L5 10L2 10L2 13L5 13Z"/></svg>
```

### React

```tsx
// Gentleface "auto-layout-wrap" (line-round), MIT. https://gentleface.com/icons/auto-layout-wrap
import type { SVGProps } from 'react';

export function AutoLayoutWrapIcon(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="M5.707 5.707C5.512 5.902 5.276 6 5 6L2 6C1.724 6 1.488 5.902 1.293 5.707C1.098 5.512 1 5.276 1 5L1 2C1 1.724 1.098 1.488 1.293 1.293C1.488 1.098 1.724 1 2 1L5 1C5.276 1 5.512 1.098 5.707 1.293C5.902 1.488 6 1.724 6 2L6 5C6 5.276 5.902 5.512 5.707 5.707ZM11.707 1.293C11.902 1.488 12 1.724 12 2L12 5C12 5.276 11.902 5.512 11.707 5.707C11.512 5.902 11.276 6 11 6L8 6C7.724 6 7.488 5.902 7.293 5.707C7.098 5.512 7 5.276 7 5L7 2C7 1.724 7.098 1.488 7.293 1.293C7.488 1.098 7.724 1 8 1L11 1C11.276 1 11.512 1.098 11.707 1.293ZM14.707 11.707C14.512 11.902 14.276 12 14 12L9.707 12L11.854 14.146C11.953 14.246 12.003 14.364 12.003 14.5C12.003 14.636 11.953 14.754 11.854 14.854C11.754 14.953 11.636 15.003 11.5 15.003C11.364 15.003 11.246 14.953 11.146 14.854L8.146 11.854C8.047 11.754 7.997 11.636 7.997 11.5C7.997 11.364 8.047 11.246 8.146 11.146L11.146 8.146C11.246 8.047 11.364 7.997 11.5 7.997C11.636 7.997 11.754 8.047 11.854 8.146C11.953 8.246 12.003 8.364 12.003 8.5C12.003 8.636 11.953 8.754 11.854 8.854L9.707 11L14 11L14 1.5C14 1.359 14.048 1.241 14.144 1.144C14.241 1.048 14.359 1 14.5 1C14.641 1 14.759 1.048 14.856 1.144C14.952 1.241 15 1.359 15 1.5L15 11C15 11.276 14.902 11.512 14.707 11.707ZM5 5L5 2L2 2L2 5L5 5ZM8 5L11 5L11 2L8 2L8 5ZM5.707 13.707C5.512 13.902 5.276 14 5 14L2 14C1.724 14 1.488 13.902 1.293 13.707C1.098 13.512 1 13.276 1 13L1 10C1 9.724 1.098 9.488 1.293 9.293C1.488 9.098 1.724 9 2 9L5 9C5.276 9 5.512 9.098 5.707 9.293C5.902 9.488 6 9.724 6 10L6 13C6 13.276 5.902 13.512 5.707 13.707ZM5 13L5 10L2 10L2 13L5 13Z" />
    </svg>
  );
}
```

### Vue

```vue
<!-- Gentleface "auto-layout-wrap" (line-round), MIT. https://gentleface.com/icons/auto-layout-wrap -->
<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
    <path d="M5.707 5.707C5.512 5.902 5.276 6 5 6L2 6C1.724 6 1.488 5.902 1.293 5.707C1.098 5.512 1 5.276 1 5L1 2C1 1.724 1.098 1.488 1.293 1.293C1.488 1.098 1.724 1 2 1L5 1C5.276 1 5.512 1.098 5.707 1.293C5.902 1.488 6 1.724 6 2L6 5C6 5.276 5.902 5.512 5.707 5.707ZM11.707 1.293C11.902 1.488 12 1.724 12 2L12 5C12 5.276 11.902 5.512 11.707 5.707C11.512 5.902 11.276 6 11 6L8 6C7.724 6 7.488 5.902 7.293 5.707C7.098 5.512 7 5.276 7 5L7 2C7 1.724 7.098 1.488 7.293 1.293C7.488 1.098 7.724 1 8 1L11 1C11.276 1 11.512 1.098 11.707 1.293ZM14.707 11.707C14.512 11.902 14.276 12 14 12L9.707 12L11.854 14.146C11.953 14.246 12.003 14.364 12.003 14.5C12.003 14.636 11.953 14.754 11.854 14.854C11.754 14.953 11.636 15.003 11.5 15.003C11.364 15.003 11.246 14.953 11.146 14.854L8.146 11.854C8.047 11.754 7.997 11.636 7.997 11.5C7.997 11.364 8.047 11.246 8.146 11.146L11.146 8.146C11.246 8.047 11.364 7.997 11.5 7.997C11.636 7.997 11.754 8.047 11.854 8.146C11.953 8.246 12.003 8.364 12.003 8.5C12.003 8.636 11.953 8.754 11.854 8.854L9.707 11L14 11L14 1.5C14 1.359 14.048 1.241 14.144 1.144C14.241 1.048 14.359 1 14.5 1C14.641 1 14.759 1.048 14.856 1.144C14.952 1.241 15 1.359 15 1.5L15 11C15 11.276 14.902 11.512 14.707 11.707ZM5 5L5 2L2 2L2 5L5 5ZM8 5L11 5L11 2L8 2L8 5ZM5.707 13.707C5.512 13.902 5.276 14 5 14L2 14C1.724 14 1.488 13.902 1.293 13.707C1.098 13.512 1 13.276 1 13L1 10C1 9.724 1.098 9.488 1.293 9.293C1.488 9.098 1.724 9 2 9L5 9C5.276 9 5.512 9.098 5.707 9.293C5.902 9.488 6 9.724 6 10L6 13C6 13.276 5.902 13.512 5.707 13.707ZM5 13L5 10L2 10L2 13L5 13Z" />
  </svg>
</template>
```

### Svelte

```svelte
<!-- Gentleface "auto-layout-wrap" (line-round), MIT. https://gentleface.com/icons/auto-layout-wrap -->
<script>
  let props = $props();
</script>

<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="M5.707 5.707C5.512 5.902 5.276 6 5 6L2 6C1.724 6 1.488 5.902 1.293 5.707C1.098 5.512 1 5.276 1 5L1 2C1 1.724 1.098 1.488 1.293 1.293C1.488 1.098 1.724 1 2 1L5 1C5.276 1 5.512 1.098 5.707 1.293C5.902 1.488 6 1.724 6 2L6 5C6 5.276 5.902 5.512 5.707 5.707ZM11.707 1.293C11.902 1.488 12 1.724 12 2L12 5C12 5.276 11.902 5.512 11.707 5.707C11.512 5.902 11.276 6 11 6L8 6C7.724 6 7.488 5.902 7.293 5.707C7.098 5.512 7 5.276 7 5L7 2C7 1.724 7.098 1.488 7.293 1.293C7.488 1.098 7.724 1 8 1L11 1C11.276 1 11.512 1.098 11.707 1.293ZM14.707 11.707C14.512 11.902 14.276 12 14 12L9.707 12L11.854 14.146C11.953 14.246 12.003 14.364 12.003 14.5C12.003 14.636 11.953 14.754 11.854 14.854C11.754 14.953 11.636 15.003 11.5 15.003C11.364 15.003 11.246 14.953 11.146 14.854L8.146 11.854C8.047 11.754 7.997 11.636 7.997 11.5C7.997 11.364 8.047 11.246 8.146 11.146L11.146 8.146C11.246 8.047 11.364 7.997 11.5 7.997C11.636 7.997 11.754 8.047 11.854 8.146C11.953 8.246 12.003 8.364 12.003 8.5C12.003 8.636 11.953 8.754 11.854 8.854L9.707 11L14 11L14 1.5C14 1.359 14.048 1.241 14.144 1.144C14.241 1.048 14.359 1 14.5 1C14.641 1 14.759 1.048 14.856 1.144C14.952 1.241 15 1.359 15 1.5L15 11C15 11.276 14.902 11.512 14.707 11.707ZM5 5L5 2L2 2L2 5L5 5ZM8 5L11 5L11 2L8 2L8 5ZM5.707 13.707C5.512 13.902 5.276 14 5 14L2 14C1.724 14 1.488 13.902 1.293 13.707C1.098 13.512 1 13.276 1 13L1 10C1 9.724 1.098 9.488 1.293 9.293C1.488 9.098 1.724 9 2 9L5 9C5.276 9 5.512 9.098 5.707 9.293C5.902 9.488 6 9.724 6 10L6 13C6 13.276 5.902 13.512 5.707 13.707ZM5 13L5 10L2 10L2 13L5 13Z" />
</svg>
```

### HTML img

```html
<!-- Gentleface "auto-layout-wrap" (line-round), MIT. https://gentleface.com/icons/auto-layout-wrap. An <img> can't take currentColor: it draws black. Inline the SVG or use the CSS mask to color it. -->
<img src="https://gentleface.com/svg/line-round/16/auto-layout-wrap.svg" width="16" height="16" alt="">
```

### CSS

```css
/* Gentleface "auto-layout-wrap" (line-round), MIT. https://gentleface.com/icons/auto-layout-wrap. Takes the text color. */
.icon-auto-layout-wrap {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M5.707 5.707C5.512 5.902 5.276 6 5 6L2 6C1.724 6 1.488 5.902 1.293 5.707C1.098 5.512 1 5.276 1 5L1 2C1 1.724 1.098 1.488 1.293 1.293C1.488 1.098 1.724 1 2 1L5 1C5.276 1 5.512 1.098 5.707 1.293C5.902 1.488 6 1.724 6 2L6 5C6 5.276 5.902 5.512 5.707 5.707ZM11.707 1.293C11.902 1.488 12 1.724 12 2L12 5C12 5.276 11.902 5.512 11.707 5.707C11.512 5.902 11.276 6 11 6L8 6C7.724 6 7.488 5.902 7.293 5.707C7.098 5.512 7 5.276 7 5L7 2C7 1.724 7.098 1.488 7.293 1.293C7.488 1.098 7.724 1 8 1L11 1C11.276 1 11.512 1.098 11.707 1.293ZM14.707 11.707C14.512 11.902 14.276 12 14 12L9.707 12L11.854 14.146C11.953 14.246 12.003 14.364 12.003 14.5C12.003 14.636 11.953 14.754 11.854 14.854C11.754 14.953 11.636 15.003 11.5 15.003C11.364 15.003 11.246 14.953 11.146 14.854L8.146 11.854C8.047 11.754 7.997 11.636 7.997 11.5C7.997 11.364 8.047 11.246 8.146 11.146L11.146 8.146C11.246 8.047 11.364 7.997 11.5 7.997C11.636 7.997 11.754 8.047 11.854 8.146C11.953 8.246 12.003 8.364 12.003 8.5C12.003 8.636 11.953 8.754 11.854 8.854L9.707 11L14 11L14 1.5C14 1.359 14.048 1.241 14.144 1.144C14.241 1.048 14.359 1 14.5 1C14.641 1 14.759 1.048 14.856 1.144C14.952 1.241 15 1.359 15 1.5L15 11C15 11.276 14.902 11.512 14.707 11.707ZM5 5L5 2L2 2L2 5L5 5ZM8 5L11 5L11 2L8 2L8 5ZM5.707 13.707C5.512 13.902 5.276 14 5 14L2 14C1.724 14 1.488 13.902 1.293 13.707C1.098 13.512 1 13.276 1 13L1 10C1 9.724 1.098 9.488 1.293 9.293C1.488 9.098 1.724 9 2 9L5 9C5.276 9 5.512 9.098 5.707 9.293C5.902 9.488 6 9.724 6 10L6 13C6 13.276 5.902 13.512 5.707 13.707ZM5 13L5 10L2 10L2 13L5 13Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M5.707 5.707C5.512 5.902 5.276 6 5 6L2 6C1.724 6 1.488 5.902 1.293 5.707C1.098 5.512 1 5.276 1 5L1 2C1 1.724 1.098 1.488 1.293 1.293C1.488 1.098 1.724 1 2 1L5 1C5.276 1 5.512 1.098 5.707 1.293C5.902 1.488 6 1.724 6 2L6 5C6 5.276 5.902 5.512 5.707 5.707ZM11.707 1.293C11.902 1.488 12 1.724 12 2L12 5C12 5.276 11.902 5.512 11.707 5.707C11.512 5.902 11.276 6 11 6L8 6C7.724 6 7.488 5.902 7.293 5.707C7.098 5.512 7 5.276 7 5L7 2C7 1.724 7.098 1.488 7.293 1.293C7.488 1.098 7.724 1 8 1L11 1C11.276 1 11.512 1.098 11.707 1.293ZM14.707 11.707C14.512 11.902 14.276 12 14 12L9.707 12L11.854 14.146C11.953 14.246 12.003 14.364 12.003 14.5C12.003 14.636 11.953 14.754 11.854 14.854C11.754 14.953 11.636 15.003 11.5 15.003C11.364 15.003 11.246 14.953 11.146 14.854L8.146 11.854C8.047 11.754 7.997 11.636 7.997 11.5C7.997 11.364 8.047 11.246 8.146 11.146L11.146 8.146C11.246 8.047 11.364 7.997 11.5 7.997C11.636 7.997 11.754 8.047 11.854 8.146C11.953 8.246 12.003 8.364 12.003 8.5C12.003 8.636 11.953 8.754 11.854 8.854L9.707 11L14 11L14 1.5C14 1.359 14.048 1.241 14.144 1.144C14.241 1.048 14.359 1 14.5 1C14.641 1 14.759 1.048 14.856 1.144C14.952 1.241 15 1.359 15 1.5L15 11C15 11.276 14.902 11.512 14.707 11.707ZM5 5L5 2L2 2L2 5L5 5ZM8 5L11 5L11 2L8 2L8 5ZM5.707 13.707C5.512 13.902 5.276 14 5 14L2 14C1.724 14 1.488 13.902 1.293 13.707C1.098 13.512 1 13.276 1 13L1 10C1 9.724 1.098 9.488 1.293 9.293C1.488 9.098 1.724 9 2 9L5 9C5.276 9 5.512 9.098 5.707 9.293C5.902 9.488 6 9.724 6 10L6 13C6 13.276 5.902 13.512 5.707 13.707ZM5 13L5 10L2 10L2 13L5 13Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
```

### Data URL

```text
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M5.707 5.707C5.512 5.902 5.276 6 5 6L2 6C1.724 6 1.488 5.902 1.293 5.707C1.098 5.512 1 5.276 1 5L1 2C1 1.724 1.098 1.488 1.293 1.293C1.488 1.098 1.724 1 2 1L5 1C5.276 1 5.512 1.098 5.707 1.293C5.902 1.488 6 1.724 6 2L6 5C6 5.276 5.902 5.512 5.707 5.707ZM11.707 1.293C11.902 1.488 12 1.724 12 2L12 5C12 5.276 11.902 5.512 11.707 5.707C11.512 5.902 11.276 6 11 6L8 6C7.724 6 7.488 5.902 7.293 5.707C7.098 5.512 7 5.276 7 5L7 2C7 1.724 7.098 1.488 7.293 1.293C7.488 1.098 7.724 1 8 1L11 1C11.276 1 11.512 1.098 11.707 1.293ZM14.707 11.707C14.512 11.902 14.276 12 14 12L9.707 12L11.854 14.146C11.953 14.246 12.003 14.364 12.003 14.5C12.003 14.636 11.953 14.754 11.854 14.854C11.754 14.953 11.636 15.003 11.5 15.003C11.364 15.003 11.246 14.953 11.146 14.854L8.146 11.854C8.047 11.754 7.997 11.636 7.997 11.5C7.997 11.364 8.047 11.246 8.146 11.146L11.146 8.146C11.246 8.047 11.364 7.997 11.5 7.997C11.636 7.997 11.754 8.047 11.854 8.146C11.953 8.246 12.003 8.364 12.003 8.5C12.003 8.636 11.953 8.754 11.854 8.854L9.707 11L14 11L14 1.5C14 1.359 14.048 1.241 14.144 1.144C14.241 1.048 14.359 1 14.5 1C14.641 1 14.759 1.048 14.856 1.144C14.952 1.241 15 1.359 15 1.5L15 11C15 11.276 14.902 11.512 14.707 11.707ZM5 5L5 2L2 2L2 5L5 5ZM8 5L11 5L11 2L8 2L8 5ZM5.707 13.707C5.512 13.902 5.276 14 5 14L2 14C1.724 14 1.488 13.902 1.293 13.707C1.098 13.512 1 13.276 1 13L1 10C1 9.724 1.098 9.488 1.293 9.293C1.488 9.098 1.724 9 2 9L5 9C5.276 9 5.512 9.098 5.707 9.293C5.902 9.488 6 9.724 6 10L6 13C6 13.276 5.902 13.512 5.707 13.707ZM5 13L5 10L2 10L2 13L5 13Z'/%3E%3C/svg%3E
```

### Sprite

```html
<!-- Gentleface "auto-layout-wrap" (line-round), MIT. https://gentleface.com/icons/auto-layout-wrap
     Every icon of this style in one file: https://gentleface.com/sprite/line-round.svg
     Serve it from your own origin: <use> does not load from another origin. -->
<svg width="16" height="16" aria-hidden="true"><use href="/sprite/line-round.svg#auto-layout-wrap"/></svg>
```

### SwiftUI

```swift
// Gentleface "auto-layout-wrap" (line-round), MIT. https://gentleface.com/icons/auto-layout-wrap
import SwiftUI

struct AutoLayoutWrapIcon: Shape {
    func path(in rect: CGRect) -> Path {
        var p = Path()
        p.move(to: CGPoint(x: 5.707, y: 5.707))
        p.addCurve(to: CGPoint(x: 5, y: 6), control1: CGPoint(x: 5.512, y: 5.902), control2: CGPoint(x: 5.276, y: 6))
        p.addLine(to: CGPoint(x: 2, y: 6))
        p.addCurve(to: CGPoint(x: 1.293, y: 5.707), control1: CGPoint(x: 1.724, y: 6), control2: CGPoint(x: 1.488, y: 5.902))
        p.addCurve(to: CGPoint(x: 1, y: 5), control1: CGPoint(x: 1.098, y: 5.512), control2: CGPoint(x: 1, y: 5.276))
        p.addLine(to: CGPoint(x: 1, y: 2))
        p.addCurve(to: CGPoint(x: 1.293, y: 1.293), control1: CGPoint(x: 1, y: 1.724), control2: CGPoint(x: 1.098, y: 1.488))
        p.addCurve(to: CGPoint(x: 2, y: 1), control1: CGPoint(x: 1.488, y: 1.098), control2: CGPoint(x: 1.724, y: 1))
        p.addLine(to: CGPoint(x: 5, y: 1))
        p.addCurve(to: CGPoint(x: 5.707, y: 1.293), control1: CGPoint(x: 5.276, y: 1), control2: CGPoint(x: 5.512, y: 1.098))
        p.addCurve(to: CGPoint(x: 6, y: 2), control1: CGPoint(x: 5.902, y: 1.488), control2: CGPoint(x: 6, y: 1.724))
        p.addLine(to: CGPoint(x: 6, y: 5))
        p.addCurve(to: CGPoint(x: 5.707, y: 5.707), control1: CGPoint(x: 6, y: 5.276), control2: CGPoint(x: 5.902, y: 5.512))
        p.closeSubpath()
        p.move(to: CGPoint(x: 11.707, y: 1.293))
        p.addCurve(to: CGPoint(x: 12, y: 2), control1: CGPoint(x: 11.902, y: 1.488), control2: CGPoint(x: 12, y: 1.724))
        p.addLine(to: CGPoint(x: 12, y: 5))
        p.addCurve(to: CGPoint(x: 11.707, y: 5.707), control1: CGPoint(x: 12, y: 5.276), control2: CGPoint(x: 11.902, y: 5.512))
        p.addCurve(to: CGPoint(x: 11, y: 6), control1: CGPoint(x: 11.512, y: 5.902), control2: CGPoint(x: 11.276, y: 6))
        p.addLine(to: CGPoint(x: 8, y: 6))
        p.addCurve(to: CGPoint(x: 7.293, y: 5.707), control1: CGPoint(x: 7.724, y: 6), control2: CGPoint(x: 7.488, y: 5.902))
        p.addCurve(to: CGPoint(x: 7, y: 5), control1: CGPoint(x: 7.098, y: 5.512), control2: CGPoint(x: 7, y: 5.276))
        p.addLine(to: CGPoint(x: 7, y: 2))
        p.addCurve(to: CGPoint(x: 7.293, y: 1.293), control1: CGPoint(x: 7, y: 1.724), control2: CGPoint(x: 7.098, y: 1.488))
        p.addCurve(to: CGPoint(x: 8, y: 1), control1: CGPoint(x: 7.488, y: 1.098), control2: CGPoint(x: 7.724, y: 1))
        p.addLine(to: CGPoint(x: 11, y: 1))
        p.addCurve(to: CGPoint(x: 11.707, y: 1.293), control1: CGPoint(x: 11.276, y: 1), control2: CGPoint(x: 11.512, y: 1.098))
        p.closeSubpath()
        p.move(to: CGPoint(x: 14.707, y: 11.707))
        p.addCurve(to: CGPoint(x: 14, y: 12), control1: CGPoint(x: 14.512, y: 11.902), control2: CGPoint(x: 14.276, y: 12))
        p.addLine(to: CGPoint(x: 9.707, y: 12))
        p.addLine(to: CGPoint(x: 11.854, y: 14.146))
        p.addCurve(to: CGPoint(x: 12.003, y: 14.5), control1: CGPoint(x: 11.953, y: 14.246), control2: CGPoint(x: 12.003, y: 14.364))
        p.addCurve(to: CGPoint(x: 11.854, y: 14.854), control1: CGPoint(x: 12.003, y: 14.636), control2: CGPoint(x: 11.953, y: 14.754))
        p.addCurve(to: CGPoint(x: 11.5, y: 15.003), control1: CGPoint(x: 11.754, y: 14.953), control2: CGPoint(x: 11.636, y: 15.003))
        p.addCurve(to: CGPoint(x: 11.146, y: 14.854), control1: CGPoint(x: 11.364, y: 15.003), control2: CGPoint(x: 11.246, y: 14.953))
        p.addLine(to: CGPoint(x: 8.146, y: 11.854))
        p.addCurve(to: CGPoint(x: 7.997, y: 11.5), control1: CGPoint(x: 8.047, y: 11.754), control2: CGPoint(x: 7.997, y: 11.636))
        p.addCurve(to: CGPoint(x: 8.146, y: 11.146), control1: CGPoint(x: 7.997, y: 11.364), control2: CGPoint(x: 8.047, y: 11.246))
        p.addLine(to: CGPoint(x: 11.146, y: 8.146))
        p.addCurve(to: CGPoint(x: 11.5, y: 7.997), control1: CGPoint(x: 11.246, y: 8.047), control2: CGPoint(x: 11.364, y: 7.997))
        p.addCurve(to: CGPoint(x: 11.854, y: 8.146), control1: CGPoint(x: 11.636, y: 7.997), control2: CGPoint(x: 11.754, y: 8.047))
        p.addCurve(to: CGPoint(x: 12.003, y: 8.5), control1: CGPoint(x: 11.953, y: 8.246), control2: CGPoint(x: 12.003, y: 8.364))
        p.addCurve(to: CGPoint(x: 11.854, y: 8.854), control1: CGPoint(x: 12.003, y: 8.636), control2: CGPoint(x: 11.953, y: 8.754))
        p.addLine(to: CGPoint(x: 9.707, y: 11))
        p.addLine(to: CGPoint(x: 14, y: 11))
        p.addLine(to: CGPoint(x: 14, y: 1.5))
        p.addCurve(to: CGPoint(x: 14.144, y: 1.144), control1: CGPoint(x: 14, y: 1.359), control2: CGPoint(x: 14.048, y: 1.241))
        p.addCurve(to: CGPoint(x: 14.5, y: 1), control1: CGPoint(x: 14.241, y: 1.048), control2: CGPoint(x: 14.359, y: 1))
        p.addCurve(to: CGPoint(x: 14.856, y: 1.144), control1: CGPoint(x: 14.641, y: 1), control2: CGPoint(x: 14.759, y: 1.048))
        p.addCurve(to: CGPoint(x: 15, y: 1.5), control1: CGPoint(x: 14.952, y: 1.241), control2: CGPoint(x: 15, y: 1.359))
        p.addLine(to: CGPoint(x: 15, y: 11))
        p.addCurve(to: CGPoint(x: 14.707, y: 11.707), control1: CGPoint(x: 15, y: 11.276), control2: CGPoint(x: 14.902, y: 11.512))
        p.closeSubpath()
        p.move(to: CGPoint(x: 5, y: 5))
        p.addLine(to: CGPoint(x: 5, y: 2))
        p.addLine(to: CGPoint(x: 2, y: 2))
        p.addLine(to: CGPoint(x: 2, y: 5))
        p.addLine(to: CGPoint(x: 5, y: 5))
        p.closeSubpath()
        p.move(to: CGPoint(x: 8, y: 5))
        p.addLine(to: CGPoint(x: 11, y: 5))
        p.addLine(to: CGPoint(x: 11, y: 2))
        p.addLine(to: CGPoint(x: 8, y: 2))
        p.addLine(to: CGPoint(x: 8, y: 5))
        p.closeSubpath()
        p.move(to: CGPoint(x: 5.707, y: 13.707))
        p.addCurve(to: CGPoint(x: 5, y: 14), control1: CGPoint(x: 5.512, y: 13.902), control2: CGPoint(x: 5.276, y: 14))
        p.addLine(to: CGPoint(x: 2, y: 14))
        p.addCurve(to: CGPoint(x: 1.293, y: 13.707), control1: CGPoint(x: 1.724, y: 14), control2: CGPoint(x: 1.488, y: 13.902))
        p.addCurve(to: CGPoint(x: 1, y: 13), control1: CGPoint(x: 1.098, y: 13.512), control2: CGPoint(x: 1, y: 13.276))
        p.addLine(to: CGPoint(x: 1, y: 10))
        p.addCurve(to: CGPoint(x: 1.293, y: 9.293), control1: CGPoint(x: 1, y: 9.724), control2: CGPoint(x: 1.098, y: 9.488))
        p.addCurve(to: CGPoint(x: 2, y: 9), control1: CGPoint(x: 1.488, y: 9.098), control2: CGPoint(x: 1.724, y: 9))
        p.addLine(to: CGPoint(x: 5, y: 9))
        p.addCurve(to: CGPoint(x: 5.707, y: 9.293), control1: CGPoint(x: 5.276, y: 9), control2: CGPoint(x: 5.512, y: 9.098))
        p.addCurve(to: CGPoint(x: 6, y: 10), control1: CGPoint(x: 5.902, y: 9.488), control2: CGPoint(x: 6, y: 9.724))
        p.addLine(to: CGPoint(x: 6, y: 13))
        p.addCurve(to: CGPoint(x: 5.707, y: 13.707), control1: CGPoint(x: 6, y: 13.276), control2: CGPoint(x: 5.902, y: 13.512))
        p.closeSubpath()
        p.move(to: CGPoint(x: 5, y: 13))
        p.addLine(to: CGPoint(x: 5, y: 10))
        p.addLine(to: CGPoint(x: 2, y: 10))
        p.addLine(to: CGPoint(x: 2, y: 13))
        p.addLine(to: CGPoint(x: 5, y: 13))
        p.closeSubpath()
        return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16))
    }
}

// AutoLayoutWrapIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp.
```

### Compose

```kotlin
// Gentleface "auto-layout-wrap" (line-round), MIT. https://gentleface.com/icons/auto-layout-wrap
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.graphics.vector.addPathNodes
import androidx.compose.ui.unit.dp

val AutoLayoutWrapIcon: ImageVector by lazy {
    ImageVector.Builder(
        name = "auto-layout-wrap", defaultWidth = 16.dp, defaultHeight = 16.dp,
        viewportWidth = 16f, viewportHeight = 16f,
    ).addPath(
        pathData = addPathNodes("M5.707 5.707C5.512 5.902 5.276 6 5 6L2 6C1.724 6 1.488 5.902 1.293 5.707C1.098 5.512 1 5.276 1 5L1 2C1 1.724 1.098 1.488 1.293 1.293C1.488 1.098 1.724 1 2 1L5 1C5.276 1 5.512 1.098 5.707 1.293C5.902 1.488 6 1.724 6 2L6 5C6 5.276 5.902 5.512 5.707 5.707ZM11.707 1.293C11.902 1.488 12 1.724 12 2L12 5C12 5.276 11.902 5.512 11.707 5.707C11.512 5.902 11.276 6 11 6L8 6C7.724 6 7.488 5.902 7.293 5.707C7.098 5.512 7 5.276 7 5L7 2C7 1.724 7.098 1.488 7.293 1.293C7.488 1.098 7.724 1 8 1L11 1C11.276 1 11.512 1.098 11.707 1.293ZM14.707 11.707C14.512 11.902 14.276 12 14 12L9.707 12L11.854 14.146C11.953 14.246 12.003 14.364 12.003 14.5C12.003 14.636 11.953 14.754 11.854 14.854C11.754 14.953 11.636 15.003 11.5 15.003C11.364 15.003 11.246 14.953 11.146 14.854L8.146 11.854C8.047 11.754 7.997 11.636 7.997 11.5C7.997 11.364 8.047 11.246 8.146 11.146L11.146 8.146C11.246 8.047 11.364 7.997 11.5 7.997C11.636 7.997 11.754 8.047 11.854 8.146C11.953 8.246 12.003 8.364 12.003 8.5C12.003 8.636 11.953 8.754 11.854 8.854L9.707 11L14 11L14 1.5C14 1.359 14.048 1.241 14.144 1.144C14.241 1.048 14.359 1 14.5 1C14.641 1 14.759 1.048 14.856 1.144C14.952 1.241 15 1.359 15 1.5L15 11C15 11.276 14.902 11.512 14.707 11.707ZM5 5L5 2L2 2L2 5L5 5ZM8 5L11 5L11 2L8 2L8 5ZM5.707 13.707C5.512 13.902 5.276 14 5 14L2 14C1.724 14 1.488 13.902 1.293 13.707C1.098 13.512 1 13.276 1 13L1 10C1 9.724 1.098 9.488 1.293 9.293C1.488 9.098 1.724 9 2 9L5 9C5.276 9 5.512 9.098 5.707 9.293C5.902 9.488 6 9.724 6 10L6 13C6 13.276 5.902 13.512 5.707 13.707ZM5 13L5 10L2 10L2 13L5 13Z"),
        fill = SolidColor(Color.Black),
    ).build()
}

// Icon(AutoLayoutWrapIcon, contentDescription = null) tints it with LocalContentColor.
```

### Android XML

```xml
<!-- res/drawable/ic_auto_layout_wrap.xml · Gentleface "auto-layout-wrap" (line-round), MIT. https://gentleface.com/icons/auto-layout-wrap -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="16dp"
    android:height="16dp"
    android:viewportWidth="16"
    android:viewportHeight="16"
    android:tint="?attr/colorControlNormal">
  <path
      android:fillColor="@android:color/white"
      android:pathData="M5.707 5.707C5.512 5.902 5.276 6 5 6L2 6C1.724 6 1.488 5.902 1.293 5.707C1.098 5.512 1 5.276 1 5L1 2C1 1.724 1.098 1.488 1.293 1.293C1.488 1.098 1.724 1 2 1L5 1C5.276 1 5.512 1.098 5.707 1.293C5.902 1.488 6 1.724 6 2L6 5C6 5.276 5.902 5.512 5.707 5.707ZM11.707 1.293C11.902 1.488 12 1.724 12 2L12 5C12 5.276 11.902 5.512 11.707 5.707C11.512 5.902 11.276 6 11 6L8 6C7.724 6 7.488 5.902 7.293 5.707C7.098 5.512 7 5.276 7 5L7 2C7 1.724 7.098 1.488 7.293 1.293C7.488 1.098 7.724 1 8 1L11 1C11.276 1 11.512 1.098 11.707 1.293ZM14.707 11.707C14.512 11.902 14.276 12 14 12L9.707 12L11.854 14.146C11.953 14.246 12.003 14.364 12.003 14.5C12.003 14.636 11.953 14.754 11.854 14.854C11.754 14.953 11.636 15.003 11.5 15.003C11.364 15.003 11.246 14.953 11.146 14.854L8.146 11.854C8.047 11.754 7.997 11.636 7.997 11.5C7.997 11.364 8.047 11.246 8.146 11.146L11.146 8.146C11.246 8.047 11.364 7.997 11.5 7.997C11.636 7.997 11.754 8.047 11.854 8.146C11.953 8.246 12.003 8.364 12.003 8.5C12.003 8.636 11.953 8.754 11.854 8.854L9.707 11L14 11L14 1.5C14 1.359 14.048 1.241 14.144 1.144C14.241 1.048 14.359 1 14.5 1C14.641 1 14.759 1.048 14.856 1.144C14.952 1.241 15 1.359 15 1.5L15 11C15 11.276 14.902 11.512 14.707 11.707ZM5 5L5 2L2 2L2 5L5 5ZM8 5L11 5L11 2L8 2L8 5ZM5.707 13.707C5.512 13.902 5.276 14 5 14L2 14C1.724 14 1.488 13.902 1.293 13.707C1.098 13.512 1 13.276 1 13L1 10C1 9.724 1.098 9.488 1.293 9.293C1.488 9.098 1.724 9 2 9L5 9C5.276 9 5.512 9.098 5.707 9.293C5.902 9.488 6 9.724 6 10L6 13C6 13.276 5.902 13.512 5.707 13.707ZM5 13L5 10L2 10L2 13L5 13Z"/>
</vector>
```

### Flutter

```dart
// Gentleface "auto-layout-wrap" (line-round), MIT. https://gentleface.com/icons/auto-layout-wrap
import 'package:flutter/widgets.dart';

class AutoLayoutWrapIcon extends StatelessWidget {
  const AutoLayoutWrapIcon({super.key, this.size = 16, this.color});
  final double size;
  final Color? color;

  @override
  Widget build(BuildContext context) => CustomPaint(
        size: Size.square(size),
        painter: _AutoLayoutWrapIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)),
      );
}

class _AutoLayoutWrapIconPainter extends CustomPainter {
  _AutoLayoutWrapIconPainter(this.color);
  final Color color;

  @override
  void paint(Canvas canvas, Size size) {
    canvas.scale(size.width / 16, size.height / 16);
    final p = Path()
      ..moveTo(5.707, 5.707)
      ..cubicTo(5.512, 5.902, 5.276, 6, 5, 6)
      ..lineTo(2, 6)
      ..cubicTo(1.724, 6, 1.488, 5.902, 1.293, 5.707)
      ..cubicTo(1.098, 5.512, 1, 5.276, 1, 5)
      ..lineTo(1, 2)
      ..cubicTo(1, 1.724, 1.098, 1.488, 1.293, 1.293)
      ..cubicTo(1.488, 1.098, 1.724, 1, 2, 1)
      ..lineTo(5, 1)
      ..cubicTo(5.276, 1, 5.512, 1.098, 5.707, 1.293)
      ..cubicTo(5.902, 1.488, 6, 1.724, 6, 2)
      ..lineTo(6, 5)
      ..cubicTo(6, 5.276, 5.902, 5.512, 5.707, 5.707)
      ..close()
      ..moveTo(11.707, 1.293)
      ..cubicTo(11.902, 1.488, 12, 1.724, 12, 2)
      ..lineTo(12, 5)
      ..cubicTo(12, 5.276, 11.902, 5.512, 11.707, 5.707)
      ..cubicTo(11.512, 5.902, 11.276, 6, 11, 6)
      ..lineTo(8, 6)
      ..cubicTo(7.724, 6, 7.488, 5.902, 7.293, 5.707)
      ..cubicTo(7.098, 5.512, 7, 5.276, 7, 5)
      ..lineTo(7, 2)
      ..cubicTo(7, 1.724, 7.098, 1.488, 7.293, 1.293)
      ..cubicTo(7.488, 1.098, 7.724, 1, 8, 1)
      ..lineTo(11, 1)
      ..cubicTo(11.276, 1, 11.512, 1.098, 11.707, 1.293)
      ..close()
      ..moveTo(14.707, 11.707)
      ..cubicTo(14.512, 11.902, 14.276, 12, 14, 12)
      ..lineTo(9.707, 12)
      ..lineTo(11.854, 14.146)
      ..cubicTo(11.953, 14.246, 12.003, 14.364, 12.003, 14.5)
      ..cubicTo(12.003, 14.636, 11.953, 14.754, 11.854, 14.854)
      ..cubicTo(11.754, 14.953, 11.636, 15.003, 11.5, 15.003)
      ..cubicTo(11.364, 15.003, 11.246, 14.953, 11.146, 14.854)
      ..lineTo(8.146, 11.854)
      ..cubicTo(8.047, 11.754, 7.997, 11.636, 7.997, 11.5)
      ..cubicTo(7.997, 11.364, 8.047, 11.246, 8.146, 11.146)
      ..lineTo(11.146, 8.146)
      ..cubicTo(11.246, 8.047, 11.364, 7.997, 11.5, 7.997)
      ..cubicTo(11.636, 7.997, 11.754, 8.047, 11.854, 8.146)
      ..cubicTo(11.953, 8.246, 12.003, 8.364, 12.003, 8.5)
      ..cubicTo(12.003, 8.636, 11.953, 8.754, 11.854, 8.854)
      ..lineTo(9.707, 11)
      ..lineTo(14, 11)
      ..lineTo(14, 1.5)
      ..cubicTo(14, 1.359, 14.048, 1.241, 14.144, 1.144)
      ..cubicTo(14.241, 1.048, 14.359, 1, 14.5, 1)
      ..cubicTo(14.641, 1, 14.759, 1.048, 14.856, 1.144)
      ..cubicTo(14.952, 1.241, 15, 1.359, 15, 1.5)
      ..lineTo(15, 11)
      ..cubicTo(15, 11.276, 14.902, 11.512, 14.707, 11.707)
      ..close()
      ..moveTo(5, 5)
      ..lineTo(5, 2)
      ..lineTo(2, 2)
      ..lineTo(2, 5)
      ..lineTo(5, 5)
      ..close()
      ..moveTo(8, 5)
      ..lineTo(11, 5)
      ..lineTo(11, 2)
      ..lineTo(8, 2)
      ..lineTo(8, 5)
      ..close()
      ..moveTo(5.707, 13.707)
      ..cubicTo(5.512, 13.902, 5.276, 14, 5, 14)
      ..lineTo(2, 14)
      ..cubicTo(1.724, 14, 1.488, 13.902, 1.293, 13.707)
      ..cubicTo(1.098, 13.512, 1, 13.276, 1, 13)
      ..lineTo(1, 10)
      ..cubicTo(1, 9.724, 1.098, 9.488, 1.293, 9.293)
      ..cubicTo(1.488, 9.098, 1.724, 9, 2, 9)
      ..lineTo(5, 9)
      ..cubicTo(5.276, 9, 5.512, 9.098, 5.707, 9.293)
      ..cubicTo(5.902, 9.488, 6, 9.724, 6, 10)
      ..lineTo(6, 13)
      ..cubicTo(6, 13.276, 5.902, 13.512, 5.707, 13.707)
      ..close()
      ..moveTo(5, 13)
      ..lineTo(5, 10)
      ..lineTo(2, 10)
      ..lineTo(2, 13)
      ..lineTo(5, 13)
      ..close();
    canvas.drawPath(p, Paint()..color = color);
  }

  @override
  bool shouldRepaint(_AutoLayoutWrapIconPainter old) => old.color != color;
}
```