move-diagonal icon

Move diagonal: resize diagonal, nwse resize. 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="M14 13.293L14 10.5C14 10.359 14.048 10.241 14.144 10.144C14.241 10.048 14.359 10 14.5 10C14.641 10 14.759 10.048 14.856 10.144C14.952 10.241 15 10.359 15 10.5L15 14.5C15 14.641 14.952 14.759 14.856 14.856C14.759 14.952 14.641 15 14.5 15L10.5 15C10.359 15 10.241 14.952 10.144 14.856C10.048 14.759 10 14.641 10 14.5C10 14.359 10.048 14.241 10.144 14.144C10.241 14.048 10.359 14 10.5 14L13.293 14L2 2.707L2 5.5C2 5.641 1.952 5.759 1.856 5.856C1.759 5.952 1.641 6 1.5 6C1.359 6 1.241 5.952 1.144 5.856C1.048 5.759 1 5.641 1 5.5L1 1.5C1 1.359 1.048 1.241 1.144 1.144C1.241 1.048 1.359 1 1.5 1L5.5 1C5.641 1 5.759 1.048 5.856 1.144C5.952 1.241 6 1.359 6 1.5C6 1.641 5.952 1.759 5.856 1.856C5.759 1.952 5.641 2 5.5 2L2.707 2L14 13.293Z"/></svg>

React

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

export function MoveDiagonalIcon(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="M14 13.293L14 10.5C14 10.359 14.048 10.241 14.144 10.144C14.241 10.048 14.359 10 14.5 10C14.641 10 14.759 10.048 14.856 10.144C14.952 10.241 15 10.359 15 10.5L15 14.5C15 14.641 14.952 14.759 14.856 14.856C14.759 14.952 14.641 15 14.5 15L10.5 15C10.359 15 10.241 14.952 10.144 14.856C10.048 14.759 10 14.641 10 14.5C10 14.359 10.048 14.241 10.144 14.144C10.241 14.048 10.359 14 10.5 14L13.293 14L2 2.707L2 5.5C2 5.641 1.952 5.759 1.856 5.856C1.759 5.952 1.641 6 1.5 6C1.359 6 1.241 5.952 1.144 5.856C1.048 5.759 1 5.641 1 5.5L1 1.5C1 1.359 1.048 1.241 1.144 1.144C1.241 1.048 1.359 1 1.5 1L5.5 1C5.641 1 5.759 1.048 5.856 1.144C5.952 1.241 6 1.359 6 1.5C6 1.641 5.952 1.759 5.856 1.856C5.759 1.952 5.641 2 5.5 2L2.707 2L14 13.293Z" />
    </svg>
  );
}

Vue

Vue: see /icons/move-diagonal.md

Svelte

Svelte: see /icons/move-diagonal.md

HTML img

HTML img: see /icons/move-diagonal.md

CSS

CSS: see /icons/move-diagonal.md

Data URL

Data URL: see /icons/move-diagonal.md

Sprite

Sprite: see /icons/move-diagonal.md

SwiftUI

SwiftUI: see /icons/move-diagonal.md

Compose

Compose: see /icons/move-diagonal.md

Android XML

Android XML: see /icons/move-diagonal.md

Flutter

Flutter: see /icons/move-diagonal.md

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. 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.

With npm: import { MoveDiagonalIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

resize diagonal, nwse resize

Alternatives

move-diagonal-rising: the rising diagonal (resize-diagonal-nesw)
grip-corner: the visible corner handle of a resizable panel (resize-grip)

Also fits

resize diagonal nesw: the falling diagonal (resize-diagonal)
resize grip: the resize cursor while dragging (resize-diagonal)

Tags

arrow, double, diagonal, resize, resize-diagonal, nwse-resize, corner, scale, drag, move, stretch, handle

Category

Arrows

Component name

MoveDiagonalIcon

History

2026-10-29 released in 0.2.0
2026-10-30 added

Since

version 0.2.0

Family 34

arrow-down arrow-down-from-line arrow-down-left arrow-down-right arrow-down-to-line arrow-left arrow-left-circle arrow-left-right arrow-left-to-line arrow-right arrow-right-circle arrow-right-to-line

More arrows icons

arrows-out chevron-down chevron-down-circle chevron-down-square chevron-down-triangle chevron-left chevron-left-circle chevron-left-square chevron-left-to-line chevron-left-triangle chevron-right chevron-right-circle chevron-right-square chevron-right-to-line chevron-right-triangle chevron-up · all arrows icons

For agents

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

move-diagonal icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp