# chevron-up icon

Chevron up. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/chevron-up

- Category: Arrows
- Use it for: collapse, close menu, collapse section, close dropdown
- Tags: caret, arrow, up
- Family: 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-triangle, chevrons-down, chevrons-down-up, chevrons-left, chevrons-right, chevrons-up, chevrons-up-down
- Component name: ChevronUpIcon
- Added: 2026-10-14

## Alternatives

- `chevron-up-triangle`: the filled caret (Material, Bootstrap, FA); pick one convention per product
- `chevrons-down-up`: collapse every section at once (show-less)
- `fold`: fold a code region in an editor gutter (fold)
- `x`: dismiss a menu or a dialog entirely (close)

## Don't confuse with

- `minimize`: minimize leaves fullscreen; it does not collapse a section

## Also fits

- up: a lighter direction cue inside a control, e.g. a stepper; the arrow is the explicit direction
- show less: collapse one section (collapse)
- highest priority: one step higher (high) when a product shows a five-level priority scale
- fold: collapse a section of an app UI (collapse)

## Not for

- move up (use `arrow-up`): chevron-up collapses a section; it does not move an item
- control key (use `control`): collapse or close a menu (collapse); the control legend sits high

## 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/chevron-up.svg · PNG https://gentleface.com/png/line-round/16/chevron-up.png · https://gentleface.com/png/line-round/32/chevron-up.png · https://gentleface.com/png/line-round/48/chevron-up.png
- line-soft: https://gentleface.com/svg/line-soft/16/chevron-up.svg · PNG https://gentleface.com/png/line-soft/16/chevron-up.png · https://gentleface.com/png/line-soft/32/chevron-up.png · https://gentleface.com/png/line-soft/48/chevron-up.png
- line-sharp: https://gentleface.com/svg/line-sharp/16/chevron-up.svg · PNG https://gentleface.com/png/line-sharp/16/chevron-up.png · https://gentleface.com/png/line-sharp/32/chevron-up.png · https://gentleface.com/png/line-sharp/48/chevron-up.png
- solid-round: https://gentleface.com/svg/solid-round/16/chevron-up.svg · PNG https://gentleface.com/png/solid-round/16/chevron-up.png · https://gentleface.com/png/solid-round/32/chevron-up.png · https://gentleface.com/png/solid-round/48/chevron-up.png
- solid-soft: https://gentleface.com/svg/solid-soft/16/chevron-up.svg · PNG https://gentleface.com/png/solid-soft/16/chevron-up.png · https://gentleface.com/png/solid-soft/32/chevron-up.png · https://gentleface.com/png/solid-soft/48/chevron-up.png
- solid-sharp: https://gentleface.com/svg/solid-sharp/16/chevron-up.svg · PNG https://gentleface.com/png/solid-sharp/16/chevron-up.png · https://gentleface.com/png/solid-sharp/32/chevron-up.png · https://gentleface.com/png/solid-sharp/48/chevron-up.png

The SVG of every style: https://gentleface.com/icons/chevron-up.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="M7.146 5.146C7.246 5.047 7.364 4.997 7.5 4.997C7.636 4.997 7.754 5.047 7.854 5.146L11.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.854L7.5 6.207L3.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.146L7.146 5.146Z"/></svg>
```

### React

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

export function ChevronUpIcon(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.146 5.146C7.246 5.047 7.364 4.997 7.5 4.997C7.636 4.997 7.754 5.047 7.854 5.146L11.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.854L7.5 6.207L3.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.146L7.146 5.146Z" />
    </svg>
  );
}
```

### Vue

```vue
<!-- Gentleface "chevron-up" (line-round), MIT. https://gentleface.com/icons/chevron-up -->
<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="M7.146 5.146C7.246 5.047 7.364 4.997 7.5 4.997C7.636 4.997 7.754 5.047 7.854 5.146L11.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.854L7.5 6.207L3.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.146L7.146 5.146Z" />
  </svg>
</template>
```

### Svelte

```svelte
<!-- Gentleface "chevron-up" (line-round), MIT. https://gentleface.com/icons/chevron-up -->
<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="M7.146 5.146C7.246 5.047 7.364 4.997 7.5 4.997C7.636 4.997 7.754 5.047 7.854 5.146L11.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.854L7.5 6.207L3.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.146L7.146 5.146Z" />
</svg>
```

### HTML img

```html
<!-- Gentleface "chevron-up" (line-round), MIT. https://gentleface.com/icons/chevron-up. 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/chevron-up.svg" width="16" height="16" alt="">
```

### CSS

```css
/* Gentleface "chevron-up" (line-round), MIT. https://gentleface.com/icons/chevron-up. Takes the text color. */
.icon-chevron-up {
  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='M7.146 5.146C7.246 5.047 7.364 4.997 7.5 4.997C7.636 4.997 7.754 5.047 7.854 5.146L11.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.854L7.5 6.207L3.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.146L7.146 5.146Z'/%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='M7.146 5.146C7.246 5.047 7.364 4.997 7.5 4.997C7.636 4.997 7.754 5.047 7.854 5.146L11.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.854L7.5 6.207L3.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.146L7.146 5.146Z'/%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='M7.146 5.146C7.246 5.047 7.364 4.997 7.5 4.997C7.636 4.997 7.754 5.047 7.854 5.146L11.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.854L7.5 6.207L3.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.146L7.146 5.146Z'/%3E%3C/svg%3E
```

### Sprite

```html
<!-- Gentleface "chevron-up" (line-round), MIT. https://gentleface.com/icons/chevron-up
     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#chevron-up"/></svg>
```

### SwiftUI

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

struct ChevronUpIcon: Shape {
    func path(in rect: CGRect) -> Path {
        var p = Path()
        p.move(to: CGPoint(x: 7.146, y: 5.146))
        p.addCurve(to: CGPoint(x: 7.5, y: 4.997), control1: CGPoint(x: 7.246, y: 5.047), control2: CGPoint(x: 7.364, y: 4.997))
        p.addCurve(to: CGPoint(x: 7.854, y: 5.146), control1: CGPoint(x: 7.636, y: 4.997), control2: CGPoint(x: 7.754, y: 5.047))
        p.addLine(to: CGPoint(x: 11.854, y: 9.146))
        p.addCurve(to: CGPoint(x: 12.003, y: 9.5), control1: CGPoint(x: 11.953, y: 9.246), control2: CGPoint(x: 12.003, y: 9.364))
        p.addCurve(to: CGPoint(x: 11.854, y: 9.854), control1: CGPoint(x: 12.003, y: 9.636), control2: CGPoint(x: 11.953, y: 9.754))
        p.addCurve(to: CGPoint(x: 11.5, y: 10.003), control1: CGPoint(x: 11.754, y: 9.953), control2: CGPoint(x: 11.636, y: 10.003))
        p.addCurve(to: CGPoint(x: 11.146, y: 9.854), control1: CGPoint(x: 11.364, y: 10.003), control2: CGPoint(x: 11.246, y: 9.953))
        p.addLine(to: CGPoint(x: 7.5, y: 6.207))
        p.addLine(to: CGPoint(x: 3.854, y: 9.854))
        p.addCurve(to: CGPoint(x: 3.5, y: 10), control1: CGPoint(x: 3.756, y: 9.951), control2: CGPoint(x: 3.638, y: 10))
        p.addCurve(to: CGPoint(x: 3.146, y: 9.854), control1: CGPoint(x: 3.362, y: 10), control2: CGPoint(x: 3.244, y: 9.951))
        p.addCurve(to: CGPoint(x: 2.997, y: 9.5), control1: CGPoint(x: 3.047, y: 9.754), control2: CGPoint(x: 2.997, y: 9.636))
        p.addCurve(to: CGPoint(x: 3.146, y: 9.146), control1: CGPoint(x: 2.997, y: 9.364), control2: CGPoint(x: 3.047, y: 9.246))
        p.addLine(to: CGPoint(x: 7.146, y: 5.146))
        p.closeSubpath()
        return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16))
    }
}

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

### Compose

```kotlin
// Gentleface "chevron-up" (line-round), MIT. https://gentleface.com/icons/chevron-up
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 ChevronUpIcon: ImageVector by lazy {
    ImageVector.Builder(
        name = "chevron-up", defaultWidth = 16.dp, defaultHeight = 16.dp,
        viewportWidth = 16f, viewportHeight = 16f,
    ).addPath(
        pathData = addPathNodes("M7.146 5.146C7.246 5.047 7.364 4.997 7.5 4.997C7.636 4.997 7.754 5.047 7.854 5.146L11.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.854L7.5 6.207L3.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.146L7.146 5.146Z"),
        fill = SolidColor(Color.Black),
    ).build()
}

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

### Android XML

```xml
<!-- res/drawable/ic_chevron_up.xml · Gentleface "chevron-up" (line-round), MIT. https://gentleface.com/icons/chevron-up -->
<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="M7.146 5.146C7.246 5.047 7.364 4.997 7.5 4.997C7.636 4.997 7.754 5.047 7.854 5.146L11.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.854L7.5 6.207L3.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.146L7.146 5.146Z"/>
</vector>
```

### Flutter

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

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

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

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

  @override
  void paint(Canvas canvas, Size size) {
    canvas.scale(size.width / 16, size.height / 16);
    final p = Path()
      ..moveTo(7.146, 5.146)
      ..cubicTo(7.246, 5.047, 7.364, 4.997, 7.5, 4.997)
      ..cubicTo(7.636, 4.997, 7.754, 5.047, 7.854, 5.146)
      ..lineTo(11.854, 9.146)
      ..cubicTo(11.953, 9.246, 12.003, 9.364, 12.003, 9.5)
      ..cubicTo(12.003, 9.636, 11.953, 9.754, 11.854, 9.854)
      ..cubicTo(11.754, 9.953, 11.636, 10.003, 11.5, 10.003)
      ..cubicTo(11.364, 10.003, 11.246, 9.953, 11.146, 9.854)
      ..lineTo(7.5, 6.207)
      ..lineTo(3.854, 9.854)
      ..cubicTo(3.756, 9.951, 3.638, 10, 3.5, 10)
      ..cubicTo(3.362, 10, 3.244, 9.951, 3.146, 9.854)
      ..cubicTo(3.047, 9.754, 2.997, 9.636, 2.997, 9.5)
      ..cubicTo(2.997, 9.364, 3.047, 9.246, 3.146, 9.146)
      ..lineTo(7.146, 5.146)
      ..close();
    canvas.drawPath(p, Paint()..color = color);
  }

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