Gentleface › Arrows › arrow-down-left

arrow-down-left icon

Arrow down left: down left, inward, south west, southwest. 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="M4.707 11L8.5 11C8.641 11 8.759 11.048 8.856 11.144C8.952 11.241 9 11.359 9 11.5C9 11.641 8.952 11.759 8.856 11.856C8.759 11.952 8.641 12 8.5 12L3.5 12C3.359 12 3.241 11.952 3.144 11.856C3.048 11.759 3 11.641 3 11.5L3 6.5C3 6.359 3.048 6.241 3.144 6.144C3.241 6.048 3.359 6 3.5 6C3.641 6 3.759 6.048 3.856 6.144C3.952 6.241 4 6.359 4 6.5L4 10.293L11.146 3.146C11.246 3.047 11.364 2.997 11.5 2.997C11.636 2.997 11.754 3.047 11.854 3.146C11.951 3.244 12 3.362 12 3.5C12 3.638 11.951 3.756 11.854 3.854L4.707 11Z"/></svg>

React

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

export function ArrowDownLeftIcon(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="M4.707 11L8.5 11C8.641 11 8.759 11.048 8.856 11.144C8.952 11.241 9 11.359 9 11.5C9 11.641 8.952 11.759 8.856 11.856C8.759 11.952 8.641 12 8.5 12L3.5 12C3.359 12 3.241 11.952 3.144 11.856C3.048 11.759 3 11.641 3 11.5L3 6.5C3 6.359 3.048 6.241 3.144 6.144C3.241 6.048 3.359 6 3.5 6C3.641 6 3.759 6.048 3.856 6.144C3.952 6.241 4 6.359 4 6.5L4 10.293L11.146 3.146C11.246 3.047 11.364 2.997 11.5 2.997C11.636 2.997 11.754 3.047 11.854 3.146C11.951 3.244 12 3.362 12 3.5C12 3.638 11.951 3.756 11.854 3.854L4.707 11Z" />
    </svg>
  );
}

Vue

Vue: see /icons/arrow-down-left.md

Svelte

Svelte: see /icons/arrow-down-left.md

HTML img

HTML img: see /icons/arrow-down-left.md

CSS

CSS: see /icons/arrow-down-left.md

Data URL

Data URL: see /icons/arrow-down-left.md

Sprite

Sprite: see /icons/arrow-down-left.md

SwiftUI

SwiftUI: see /icons/arrow-down-left.md

Compose

Compose: see /icons/arrow-down-left.md

Android XML

Android XML: see /icons/arrow-down-left.md

Flutter

Flutter: see /icons/arrow-down-left.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.

Meaning

Use it for

down left, inward, south west, southwest, inbound

Alternatives

inbox: incoming mail or messages (incoming, received)

Tags

arrow, diagonal, down-left, south-west, inward

Category

Arrows

Component name

ArrowDownLeftIcon

History

2026-10-15 added

Family 27

arrow-down arrow-down-right arrow-down-to-line arrow-left arrow-left-right arrow-left-to-line arrow-right arrow-right-to-line arrow-up arrow-up-down arrow-up-left arrow-up-right

More arrows icons

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

For agents

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

arrow-down-left icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp