# arrow-right icon Arrow right. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/arrow-right - Category: Arrows - Use it for: forward, go, go forward, navigate forward, proceed, continue, next step - Tags: arrow, direction - Family: arrow-down, arrow-down-left, arrow-down-right, arrow-down-to-line, arrow-left, arrow-left-right, arrow-left-to-line, arrow-right-to-line, arrow-up, arrow-up-down, arrow-up-left, arrow-up-right, arrow-up-to-line, corner-down-left, corner-down-right, corner-right-up, external-link, fit-height, fit-screen, fit-width, move, move-horizontal, move-vertical, redo, refresh, shrink, undo - Component name: ArrowRightIcon - Added: 2026-10-13 - Changed: 2026-10-14 (20 px drawn, 24 px drawn) ## Alternatives - `forward`: forward a message or an email to someone (forward-message) - `chevron-right`: the next item or page in a sequence (next) - `send`: submit a message (send) ## Also fits - next: proceed in a flow (go) or navigate forward (forward) - redo: navigate forward in history (forward) ## Not for - send (use `send`): arrow-right is navigation; the paper plane is the send convention ## 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/arrow-right.svg · PNG https://gentleface.com/png/line-round/16/arrow-right.png · https://gentleface.com/png/line-round/32/arrow-right.png · https://gentleface.com/png/line-round/48/arrow-right.png - line-soft: https://gentleface.com/svg/line-soft/16/arrow-right.svg · PNG https://gentleface.com/png/line-soft/16/arrow-right.png · https://gentleface.com/png/line-soft/32/arrow-right.png · https://gentleface.com/png/line-soft/48/arrow-right.png - line-sharp: https://gentleface.com/svg/line-sharp/16/arrow-right.svg · PNG https://gentleface.com/png/line-sharp/16/arrow-right.png · https://gentleface.com/png/line-sharp/32/arrow-right.png · https://gentleface.com/png/line-sharp/48/arrow-right.png - solid-round: https://gentleface.com/svg/solid-round/16/arrow-right.svg · PNG https://gentleface.com/png/solid-round/16/arrow-right.png · https://gentleface.com/png/solid-round/32/arrow-right.png · https://gentleface.com/png/solid-round/48/arrow-right.png - solid-soft: https://gentleface.com/svg/solid-soft/16/arrow-right.svg · PNG https://gentleface.com/png/solid-soft/16/arrow-right.png · https://gentleface.com/png/solid-soft/32/arrow-right.png · https://gentleface.com/png/solid-soft/48/arrow-right.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/arrow-right.svg · PNG https://gentleface.com/png/solid-sharp/16/arrow-right.png · https://gentleface.com/png/solid-sharp/32/arrow-right.png · https://gentleface.com/png/solid-sharp/48/arrow-right.png The SVG of every style: https://gentleface.com/icons/arrow-right.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 ``` ### React ```tsx // Gentleface "arrow-right" (line-round), MIT. https://gentleface.com/icons/arrow-right import type { SVGProps } from 'react'; export function ArrowRightIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "arrow-right" (line-round), MIT. https://gentleface.com/icons/arrow-right. Takes the text color. */ .icon-arrow-right { 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='M13.003 7.5C13.003 7.636 12.953 7.754 12.854 7.854L8.854 11.854C8.754 11.953 8.636 12.003 8.5 12.003C8.364 12.003 8.246 11.953 8.146 11.854C8.047 11.754 7.997 11.636 7.997 11.5C7.997 11.364 8.047 11.246 8.146 11.146L11.293 8L2.5 8C2.359 8 2.241 7.952 2.144 7.856C2.048 7.759 2 7.641 2 7.5C2 7.359 2.048 7.241 2.144 7.144C2.241 7.048 2.359 7 2.5 7L11.293 7L8.146 3.854C8.049 3.756 8 3.638 8 3.5C8 3.362 8.049 3.244 8.146 3.146C8.246 3.047 8.364 2.997 8.5 2.997C8.636 2.997 8.754 3.047 8.854 3.146L12.854 7.146C12.953 7.246 13.003 7.364 13.003 7.5Z'/%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='M13.003 7.5C13.003 7.636 12.953 7.754 12.854 7.854L8.854 11.854C8.754 11.953 8.636 12.003 8.5 12.003C8.364 12.003 8.246 11.953 8.146 11.854C8.047 11.754 7.997 11.636 7.997 11.5C7.997 11.364 8.047 11.246 8.146 11.146L11.293 8L2.5 8C2.359 8 2.241 7.952 2.144 7.856C2.048 7.759 2 7.641 2 7.5C2 7.359 2.048 7.241 2.144 7.144C2.241 7.048 2.359 7 2.5 7L11.293 7L8.146 3.854C8.049 3.756 8 3.638 8 3.5C8 3.362 8.049 3.244 8.146 3.146C8.246 3.047 8.364 2.997 8.5 2.997C8.636 2.997 8.754 3.047 8.854 3.146L12.854 7.146C12.953 7.246 13.003 7.364 13.003 7.5Z'/%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='M13.003 7.5C13.003 7.636 12.953 7.754 12.854 7.854L8.854 11.854C8.754 11.953 8.636 12.003 8.5 12.003C8.364 12.003 8.246 11.953 8.146 11.854C8.047 11.754 7.997 11.636 7.997 11.5C7.997 11.364 8.047 11.246 8.146 11.146L11.293 8L2.5 8C2.359 8 2.241 7.952 2.144 7.856C2.048 7.759 2 7.641 2 7.5C2 7.359 2.048 7.241 2.144 7.144C2.241 7.048 2.359 7 2.5 7L11.293 7L8.146 3.854C8.049 3.756 8 3.638 8 3.5C8 3.362 8.049 3.244 8.146 3.146C8.246 3.047 8.364 2.997 8.5 2.997C8.636 2.997 8.754 3.047 8.854 3.146L12.854 7.146C12.953 7.246 13.003 7.364 13.003 7.5Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "arrow-right" (line-round), MIT. https://gentleface.com/icons/arrow-right import SwiftUI struct ArrowRightIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 13.003, y: 7.5)) p.addCurve(to: CGPoint(x: 12.854, y: 7.854), control1: CGPoint(x: 13.003, y: 7.636), control2: CGPoint(x: 12.953, y: 7.754)) p.addLine(to: CGPoint(x: 8.854, y: 11.854)) p.addCurve(to: CGPoint(x: 8.5, y: 12.003), control1: CGPoint(x: 8.754, y: 11.953), control2: CGPoint(x: 8.636, y: 12.003)) p.addCurve(to: CGPoint(x: 8.146, y: 11.854), control1: CGPoint(x: 8.364, y: 12.003), control2: CGPoint(x: 8.246, y: 11.953)) p.addCurve(to: CGPoint(x: 7.997, y: 11.5), control1: CGPoint(x: 8.047, y: 11.754), control2: CGPoint(x: 7.997, y: 11.636)) p.addCurve(to: CGPoint(x: 8.146, y: 11.146), control1: CGPoint(x: 7.997, y: 11.364), control2: CGPoint(x: 8.047, y: 11.246)) p.addLine(to: CGPoint(x: 11.293, y: 8)) p.addLine(to: CGPoint(x: 2.5, y: 8)) p.addCurve(to: CGPoint(x: 2.144, y: 7.856), control1: CGPoint(x: 2.359, y: 8), control2: CGPoint(x: 2.241, y: 7.952)) p.addCurve(to: CGPoint(x: 2, y: 7.5), control1: CGPoint(x: 2.048, y: 7.759), control2: CGPoint(x: 2, y: 7.641)) p.addCurve(to: CGPoint(x: 2.144, y: 7.144), control1: CGPoint(x: 2, y: 7.359), control2: CGPoint(x: 2.048, y: 7.241)) p.addCurve(to: CGPoint(x: 2.5, y: 7), control1: CGPoint(x: 2.241, y: 7.048), control2: CGPoint(x: 2.359, y: 7)) p.addLine(to: CGPoint(x: 11.293, y: 7)) p.addLine(to: CGPoint(x: 8.146, y: 3.854)) p.addCurve(to: CGPoint(x: 8, y: 3.5), control1: CGPoint(x: 8.049, y: 3.756), control2: CGPoint(x: 8, y: 3.638)) p.addCurve(to: CGPoint(x: 8.146, y: 3.146), control1: CGPoint(x: 8, y: 3.362), control2: CGPoint(x: 8.049, y: 3.244)) p.addCurve(to: CGPoint(x: 8.5, y: 2.997), control1: CGPoint(x: 8.246, y: 3.047), control2: CGPoint(x: 8.364, y: 2.997)) p.addCurve(to: CGPoint(x: 8.854, y: 3.146), control1: CGPoint(x: 8.636, y: 2.997), control2: CGPoint(x: 8.754, y: 3.047)) p.addLine(to: CGPoint(x: 12.854, y: 7.146)) p.addCurve(to: CGPoint(x: 13.003, y: 7.5), control1: CGPoint(x: 12.953, y: 7.246), control2: CGPoint(x: 13.003, y: 7.364)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // ArrowRightIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "arrow-right" (line-round), MIT. https://gentleface.com/icons/arrow-right 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 ArrowRightIcon: ImageVector by lazy { ImageVector.Builder( name = "arrow-right", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M13.003 7.5C13.003 7.636 12.953 7.754 12.854 7.854L8.854 11.854C8.754 11.953 8.636 12.003 8.5 12.003C8.364 12.003 8.246 11.953 8.146 11.854C8.047 11.754 7.997 11.636 7.997 11.5C7.997 11.364 8.047 11.246 8.146 11.146L11.293 8L2.5 8C2.359 8 2.241 7.952 2.144 7.856C2.048 7.759 2 7.641 2 7.5C2 7.359 2.048 7.241 2.144 7.144C2.241 7.048 2.359 7 2.5 7L11.293 7L8.146 3.854C8.049 3.756 8 3.638 8 3.5C8 3.362 8.049 3.244 8.146 3.146C8.246 3.047 8.364 2.997 8.5 2.997C8.636 2.997 8.754 3.047 8.854 3.146L12.854 7.146C12.953 7.246 13.003 7.364 13.003 7.5Z"), fill = SolidColor(Color.Black), ).build() } // Icon(ArrowRightIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "arrow-right" (line-round), MIT. https://gentleface.com/icons/arrow-right import 'package:flutter/widgets.dart'; class ArrowRightIcon extends StatelessWidget { const ArrowRightIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _ArrowRightIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _ArrowRightIconPainter extends CustomPainter { _ArrowRightIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(13.003, 7.5) ..cubicTo(13.003, 7.636, 12.953, 7.754, 12.854, 7.854) ..lineTo(8.854, 11.854) ..cubicTo(8.754, 11.953, 8.636, 12.003, 8.5, 12.003) ..cubicTo(8.364, 12.003, 8.246, 11.953, 8.146, 11.854) ..cubicTo(8.047, 11.754, 7.997, 11.636, 7.997, 11.5) ..cubicTo(7.997, 11.364, 8.047, 11.246, 8.146, 11.146) ..lineTo(11.293, 8) ..lineTo(2.5, 8) ..cubicTo(2.359, 8, 2.241, 7.952, 2.144, 7.856) ..cubicTo(2.048, 7.759, 2, 7.641, 2, 7.5) ..cubicTo(2, 7.359, 2.048, 7.241, 2.144, 7.144) ..cubicTo(2.241, 7.048, 2.359, 7, 2.5, 7) ..lineTo(11.293, 7) ..lineTo(8.146, 3.854) ..cubicTo(8.049, 3.756, 8, 3.638, 8, 3.5) ..cubicTo(8, 3.362, 8.049, 3.244, 8.146, 3.146) ..cubicTo(8.246, 3.047, 8.364, 2.997, 8.5, 2.997) ..cubicTo(8.636, 2.997, 8.754, 3.047, 8.854, 3.146) ..lineTo(12.854, 7.146) ..cubicTo(12.953, 7.246, 13.003, 7.364, 13.003, 7.5) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_ArrowRightIconPainter old) => old.color != color; } ```