Gentleface › Arrows › arrow-down-from-line

arrow-down-from-line icon

Arrow down from line: downgrade, downgrade plan. 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="M2.144 1.856C2.048 1.759 2 1.641 2 1.5C2 1.359 2.048 1.241 2.144 1.144C2.241 1.048 2.359 1 2.5 1L12.5 1C12.641 1 12.759 1.048 12.856 1.144C12.952 1.241 13 1.359 13 1.5C13 1.641 12.952 1.759 12.856 1.856C12.759 1.952 12.641 2 12.5 2L2.5 2C2.359 2 2.241 1.952 2.144 1.856ZM7.144 4.144C7.241 4.048 7.359 4 7.5 4C7.641 4 7.759 4.048 7.856 4.144C7.952 4.241 8 4.359 8 4.5L8 13.293L11.146 10.146C11.246 10.047 11.364 9.997 11.5 9.997C11.636 9.997 11.754 10.047 11.854 10.146C11.953 10.246 12.003 10.364 12.003 10.5C12.003 10.636 11.953 10.754 11.854 10.854L7.854 14.854C7.754 14.953 7.636 15.003 7.5 15.003C7.364 15.003 7.246 14.953 7.146 14.854L3.146 10.854C3.047 10.754 2.997 10.636 2.997 10.5C2.997 10.364 3.047 10.246 3.146 10.146C3.244 10.049 3.362 10 3.5 10C3.638 10 3.756 10.049 3.854 10.146L7 13.293L7 4.5C7 4.359 7.048 4.241 7.144 4.144Z"/></svg>

React

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

export function ArrowDownFromLineIcon(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="M2.144 1.856C2.048 1.759 2 1.641 2 1.5C2 1.359 2.048 1.241 2.144 1.144C2.241 1.048 2.359 1 2.5 1L12.5 1C12.641 1 12.759 1.048 12.856 1.144C12.952 1.241 13 1.359 13 1.5C13 1.641 12.952 1.759 12.856 1.856C12.759 1.952 12.641 2 12.5 2L2.5 2C2.359 2 2.241 1.952 2.144 1.856ZM7.144 4.144C7.241 4.048 7.359 4 7.5 4C7.641 4 7.759 4.048 7.856 4.144C7.952 4.241 8 4.359 8 4.5L8 13.293L11.146 10.146C11.246 10.047 11.364 9.997 11.5 9.997C11.636 9.997 11.754 10.047 11.854 10.146C11.953 10.246 12.003 10.364 12.003 10.5C12.003 10.636 11.953 10.754 11.854 10.854L7.854 14.854C7.754 14.953 7.636 15.003 7.5 15.003C7.364 15.003 7.246 14.953 7.146 14.854L3.146 10.854C3.047 10.754 2.997 10.636 2.997 10.5C2.997 10.364 3.047 10.246 3.146 10.146C3.244 10.049 3.362 10 3.5 10C3.638 10 3.756 10.049 3.854 10.146L7 13.293L7 4.5C7 4.359 7.048 4.241 7.144 4.144Z" />
    </svg>
  );
}

Vue

Vue: see /icons/arrow-down-from-line.md

Svelte

Svelte: see /icons/arrow-down-from-line.md

HTML img

HTML img: see /icons/arrow-down-from-line.md

CSS

CSS: see /icons/arrow-down-from-line.md

Data URL

Data URL: see /icons/arrow-down-from-line.md

Sprite

Sprite: see /icons/arrow-down-from-line.md

SwiftUI

SwiftUI: see /icons/arrow-down-from-line.md

Compose

Compose: see /icons/arrow-down-from-line.md

Android XML

Android XML: see /icons/arrow-down-from-line.md

Flutter

Flutter: see /icons/arrow-down-from-line.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 { ArrowDownFromLineIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

downgrade, downgrade plan

Tags

arrow, down, downgrade, downgrade-plan, lower, demote, from-line, bar, level-down, decrease, reduce, drop

Category

Arrows

Component name

ArrowDownFromLineIcon

History

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

Since

version 0.2.0

Family 34

arrow-down 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 arrow-up

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/arrow-down-from-line.json · Markdown: /icons/arrow-down-from-line.md · SVG: https://gentleface.com/svg/{style}/16/arrow-down-from-line.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/arrow-down-from-line.png

arrow-down-from-line icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp