Gentleface › Arrows › fold-horizontal

fold-horizontal icon

Fold horizontal: fold horizontal, collapse horizontal. 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="M7 3L7 1L8 1L8 3L7 3ZM8 4L8 6L7 6L7 4L8 4ZM13.856 7.144C13.952 7.241 14 7.359 14 7.5C14 7.641 13.952 7.759 13.856 7.856C13.759 7.952 13.641 8 13.5 8L10.707 8L11.854 9.146C11.953 9.246 12.003 9.364 12.003 9.5C12.003 9.636 11.953 9.754 11.854 9.854C11.754 9.953 11.636 10.003 11.5 10.003C11.364 10.003 11.246 9.953 11.146 9.854L9.146 7.854C9.047 7.754 8.997 7.636 8.997 7.5C8.997 7.364 9.047 7.246 9.146 7.146L11.146 5.146C11.246 5.047 11.364 4.997 11.5 4.997C11.636 4.997 11.754 5.047 11.854 5.146C11.951 5.244 12 5.362 12 5.5C12 5.638 11.951 5.756 11.854 5.854L10.707 7L13.5 7C13.641 7 13.759 7.048 13.856 7.144ZM3.854 9.854C3.756 9.951 3.638 10 3.5 10C3.362 10 3.244 9.951 3.146 9.854C3.047 9.754 2.997 9.636 2.997 9.5C2.997 9.364 3.047 9.246 3.146 9.146L4.293 8L1.5 8C1.359 8 1.241 7.952 1.144 7.856C1.048 7.759 1 7.641 1 7.5C1 7.359 1.048 7.241 1.144 7.144C1.241 7.048 1.359 7 1.5 7L4.293 7L3.146 5.854C3.047 5.754 2.997 5.636 2.997 5.5C2.997 5.364 3.047 5.246 3.146 5.146C3.244 5.049 3.362 5 3.5 5C3.638 5 3.756 5.049 3.854 5.146L5.854 7.146C5.953 7.246 6.003 7.364 6.003 7.5C6.003 7.636 5.953 7.754 5.854 7.854L3.854 9.854ZM8 9L8 11L7 11L7 9L8 9ZM7 14L7 12L8 12L8 14L7 14Z"/></svg>

React

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

export function FoldHorizontalIcon(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="M7 3L7 1L8 1L8 3L7 3ZM8 4L8 6L7 6L7 4L8 4ZM13.856 7.144C13.952 7.241 14 7.359 14 7.5C14 7.641 13.952 7.759 13.856 7.856C13.759 7.952 13.641 8 13.5 8L10.707 8L11.854 9.146C11.953 9.246 12.003 9.364 12.003 9.5C12.003 9.636 11.953 9.754 11.854 9.854C11.754 9.953 11.636 10.003 11.5 10.003C11.364 10.003 11.246 9.953 11.146 9.854L9.146 7.854C9.047 7.754 8.997 7.636 8.997 7.5C8.997 7.364 9.047 7.246 9.146 7.146L11.146 5.146C11.246 5.047 11.364 4.997 11.5 4.997C11.636 4.997 11.754 5.047 11.854 5.146C11.951 5.244 12 5.362 12 5.5C12 5.638 11.951 5.756 11.854 5.854L10.707 7L13.5 7C13.641 7 13.759 7.048 13.856 7.144ZM3.854 9.854C3.756 9.951 3.638 10 3.5 10C3.362 10 3.244 9.951 3.146 9.854C3.047 9.754 2.997 9.636 2.997 9.5C2.997 9.364 3.047 9.246 3.146 9.146L4.293 8L1.5 8C1.359 8 1.241 7.952 1.144 7.856C1.048 7.759 1 7.641 1 7.5C1 7.359 1.048 7.241 1.144 7.144C1.241 7.048 1.359 7 1.5 7L4.293 7L3.146 5.854C3.047 5.754 2.997 5.636 2.997 5.5C2.997 5.364 3.047 5.246 3.146 5.146C3.244 5.049 3.362 5 3.5 5C3.638 5 3.756 5.049 3.854 5.146L5.854 7.146C5.953 7.246 6.003 7.364 6.003 7.5C6.003 7.636 5.953 7.754 5.854 7.854L3.854 9.854ZM8 9L8 11L7 11L7 9L8 9ZM7 14L7 12L8 12L8 14L7 14Z" />
    </svg>
  );
}

Vue

Vue: see /icons/fold-horizontal.md

Svelte

Svelte: see /icons/fold-horizontal.md

HTML img

HTML img: see /icons/fold-horizontal.md

CSS

CSS: see /icons/fold-horizontal.md

Data URL

Data URL: see /icons/fold-horizontal.md

Sprite

Sprite: see /icons/fold-horizontal.md

SwiftUI

SwiftUI: see /icons/fold-horizontal.md

Compose

Compose: see /icons/fold-horizontal.md

Android XML

Android XML: see /icons/fold-horizontal.md

Flutter

Flutter: see /icons/fold-horizontal.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 { FoldHorizontalIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

fold horizontal, collapse horizontal

Alternatives

fold: fold rows toward a horizontal line (fold)

Tags

fold, horizontal, collapse, columns, converge, arrows, line, narrow, merge, shrink-width, collapse-horizontal

Category

Arrows

Component name

FoldHorizontalIcon

History

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

Since

version 0.2.0

Family 5

fold fold-down fold-up unfold unfold-horizontal

More arrows icons

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 arrow-up arrow-up-down arrow-up-from-line arrow-up-left · all arrows icons

For agents

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

fold-horizontal icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp