# fast-forward icon Fast forward. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/fast-forward - Category: Audio & video - Use it for: fast forward, ffwd - Tags: media, playback, fast-forward, forward, triangles - Family: eject, pause, pause-circle, play, play-circle, play-off, record, record-dot, rewind, skip-back, skip-forward, stop, stop-circle - Component name: FastForwardIcon - Added: 2026-10-15 ## Alternatives - `skip-forward`: jump to the next track (next-track) - `seek-forward`: jump ahead a fixed number of seconds (seek-forward) ## Don't confuse with - `chevrons-right`: double chevrons page forward or jump to the end (jump-forward), not media ## Also fits - seek forward: scan forwards while held (fast-forward) - next track: scan forwards within a track (fast-forward) - fast: fast-forward in playback ## Not for - jump forward (use `chevrons-right`): fast-forward is the media control, a double filled triangle (fast-forward) ## 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/fast-forward.svg · PNG https://gentleface.com/png/line-round/16/fast-forward.png · https://gentleface.com/png/line-round/32/fast-forward.png · https://gentleface.com/png/line-round/48/fast-forward.png - line-soft: https://gentleface.com/svg/line-soft/16/fast-forward.svg · PNG https://gentleface.com/png/line-soft/16/fast-forward.png · https://gentleface.com/png/line-soft/32/fast-forward.png · https://gentleface.com/png/line-soft/48/fast-forward.png - line-sharp: https://gentleface.com/svg/line-sharp/16/fast-forward.svg · PNG https://gentleface.com/png/line-sharp/16/fast-forward.png · https://gentleface.com/png/line-sharp/32/fast-forward.png · https://gentleface.com/png/line-sharp/48/fast-forward.png - solid-round: https://gentleface.com/svg/solid-round/16/fast-forward.svg · PNG https://gentleface.com/png/solid-round/16/fast-forward.png · https://gentleface.com/png/solid-round/32/fast-forward.png · https://gentleface.com/png/solid-round/48/fast-forward.png - solid-soft: https://gentleface.com/svg/solid-soft/16/fast-forward.svg · PNG https://gentleface.com/png/solid-soft/16/fast-forward.png · https://gentleface.com/png/solid-soft/32/fast-forward.png · https://gentleface.com/png/solid-soft/48/fast-forward.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/fast-forward.svg · PNG https://gentleface.com/png/solid-sharp/16/fast-forward.png · https://gentleface.com/png/solid-sharp/32/fast-forward.png · https://gentleface.com/png/solid-sharp/48/fast-forward.png The SVG of every style: https://gentleface.com/icons/fast-forward.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 "fast-forward" (line-round), MIT. https://gentleface.com/icons/fast-forward import type { SVGProps } from 'react'; export function FastForwardIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "fast-forward" (line-round), MIT. https://gentleface.com/icons/fast-forward. Takes the text color. */ .icon-fast-forward { 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='M2.854 12.854C2.754 12.953 2.636 13.003 2.5 13.003C2.364 13.003 2.246 12.953 2.146 12.854C2.049 12.756 2 12.638 2 12.5L2 2.5C2 2.359 2.048 2.241 2.144 2.144C2.241 2.048 2.359 2 2.5 2C2.638 2 2.756 2.049 2.854 2.146L7 6.293L7 2.5C7 2.359 7.048 2.241 7.144 2.144C7.241 2.048 7.359 2 7.5 2C7.638 2 7.756 2.049 7.854 2.146L12.854 7.146C12.953 7.246 13.003 7.364 13.003 7.5C13.003 7.636 12.953 7.754 12.854 7.854L7.854 12.854C7.754 12.953 7.636 13.003 7.5 13.003C7.364 13.003 7.246 12.953 7.146 12.854C7.049 12.756 7 12.638 7 12.5L7 8.707L2.854 12.854ZM3 11.293L6.793 7.5L3 3.707L3 11.293ZM11.793 7.5L8 3.707L8 11.293L11.793 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='M2.854 12.854C2.754 12.953 2.636 13.003 2.5 13.003C2.364 13.003 2.246 12.953 2.146 12.854C2.049 12.756 2 12.638 2 12.5L2 2.5C2 2.359 2.048 2.241 2.144 2.144C2.241 2.048 2.359 2 2.5 2C2.638 2 2.756 2.049 2.854 2.146L7 6.293L7 2.5C7 2.359 7.048 2.241 7.144 2.144C7.241 2.048 7.359 2 7.5 2C7.638 2 7.756 2.049 7.854 2.146L12.854 7.146C12.953 7.246 13.003 7.364 13.003 7.5C13.003 7.636 12.953 7.754 12.854 7.854L7.854 12.854C7.754 12.953 7.636 13.003 7.5 13.003C7.364 13.003 7.246 12.953 7.146 12.854C7.049 12.756 7 12.638 7 12.5L7 8.707L2.854 12.854ZM3 11.293L6.793 7.5L3 3.707L3 11.293ZM11.793 7.5L8 3.707L8 11.293L11.793 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='M2.854 12.854C2.754 12.953 2.636 13.003 2.5 13.003C2.364 13.003 2.246 12.953 2.146 12.854C2.049 12.756 2 12.638 2 12.5L2 2.5C2 2.359 2.048 2.241 2.144 2.144C2.241 2.048 2.359 2 2.5 2C2.638 2 2.756 2.049 2.854 2.146L7 6.293L7 2.5C7 2.359 7.048 2.241 7.144 2.144C7.241 2.048 7.359 2 7.5 2C7.638 2 7.756 2.049 7.854 2.146L12.854 7.146C12.953 7.246 13.003 7.364 13.003 7.5C13.003 7.636 12.953 7.754 12.854 7.854L7.854 12.854C7.754 12.953 7.636 13.003 7.5 13.003C7.364 13.003 7.246 12.953 7.146 12.854C7.049 12.756 7 12.638 7 12.5L7 8.707L2.854 12.854ZM3 11.293L6.793 7.5L3 3.707L3 11.293ZM11.793 7.5L8 3.707L8 11.293L11.793 7.5Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "fast-forward" (line-round), MIT. https://gentleface.com/icons/fast-forward import SwiftUI struct FastForwardIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 2.854, y: 12.854)) p.addCurve(to: CGPoint(x: 2.5, y: 13.003), control1: CGPoint(x: 2.754, y: 12.953), control2: CGPoint(x: 2.636, y: 13.003)) p.addCurve(to: CGPoint(x: 2.146, y: 12.854), control1: CGPoint(x: 2.364, y: 13.003), control2: CGPoint(x: 2.246, y: 12.953)) p.addCurve(to: CGPoint(x: 2, y: 12.5), control1: CGPoint(x: 2.049, y: 12.756), control2: CGPoint(x: 2, y: 12.638)) p.addLine(to: CGPoint(x: 2, y: 2.5)) p.addCurve(to: CGPoint(x: 2.144, y: 2.144), control1: CGPoint(x: 2, y: 2.359), control2: CGPoint(x: 2.048, y: 2.241)) p.addCurve(to: CGPoint(x: 2.5, y: 2), control1: CGPoint(x: 2.241, y: 2.048), control2: CGPoint(x: 2.359, y: 2)) p.addCurve(to: CGPoint(x: 2.854, y: 2.146), control1: CGPoint(x: 2.638, y: 2), control2: CGPoint(x: 2.756, y: 2.049)) p.addLine(to: CGPoint(x: 7, y: 6.293)) p.addLine(to: CGPoint(x: 7, y: 2.5)) p.addCurve(to: CGPoint(x: 7.144, y: 2.144), control1: CGPoint(x: 7, y: 2.359), control2: CGPoint(x: 7.048, y: 2.241)) p.addCurve(to: CGPoint(x: 7.5, y: 2), control1: CGPoint(x: 7.241, y: 2.048), control2: CGPoint(x: 7.359, y: 2)) p.addCurve(to: CGPoint(x: 7.854, y: 2.146), control1: CGPoint(x: 7.638, y: 2), control2: CGPoint(x: 7.756, y: 2.049)) 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.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: 7.854, y: 12.854)) p.addCurve(to: CGPoint(x: 7.5, y: 13.003), control1: CGPoint(x: 7.754, y: 12.953), control2: CGPoint(x: 7.636, y: 13.003)) p.addCurve(to: CGPoint(x: 7.146, y: 12.854), control1: CGPoint(x: 7.364, y: 13.003), control2: CGPoint(x: 7.246, y: 12.953)) p.addCurve(to: CGPoint(x: 7, y: 12.5), control1: CGPoint(x: 7.049, y: 12.756), control2: CGPoint(x: 7, y: 12.638)) p.addLine(to: CGPoint(x: 7, y: 8.707)) p.addLine(to: CGPoint(x: 2.854, y: 12.854)) p.closeSubpath() p.move(to: CGPoint(x: 3, y: 11.293)) p.addLine(to: CGPoint(x: 6.793, y: 7.5)) p.addLine(to: CGPoint(x: 3, y: 3.707)) p.addLine(to: CGPoint(x: 3, y: 11.293)) p.closeSubpath() p.move(to: CGPoint(x: 11.793, y: 7.5)) p.addLine(to: CGPoint(x: 8, y: 3.707)) p.addLine(to: CGPoint(x: 8, y: 11.293)) p.addLine(to: CGPoint(x: 11.793, y: 7.5)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // FastForwardIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "fast-forward" (line-round), MIT. https://gentleface.com/icons/fast-forward 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 FastForwardIcon: ImageVector by lazy { ImageVector.Builder( name = "fast-forward", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M2.854 12.854C2.754 12.953 2.636 13.003 2.5 13.003C2.364 13.003 2.246 12.953 2.146 12.854C2.049 12.756 2 12.638 2 12.5L2 2.5C2 2.359 2.048 2.241 2.144 2.144C2.241 2.048 2.359 2 2.5 2C2.638 2 2.756 2.049 2.854 2.146L7 6.293L7 2.5C7 2.359 7.048 2.241 7.144 2.144C7.241 2.048 7.359 2 7.5 2C7.638 2 7.756 2.049 7.854 2.146L12.854 7.146C12.953 7.246 13.003 7.364 13.003 7.5C13.003 7.636 12.953 7.754 12.854 7.854L7.854 12.854C7.754 12.953 7.636 13.003 7.5 13.003C7.364 13.003 7.246 12.953 7.146 12.854C7.049 12.756 7 12.638 7 12.5L7 8.707L2.854 12.854ZM3 11.293L6.793 7.5L3 3.707L3 11.293ZM11.793 7.5L8 3.707L8 11.293L11.793 7.5Z"), fill = SolidColor(Color.Black), ).build() } // Icon(FastForwardIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "fast-forward" (line-round), MIT. https://gentleface.com/icons/fast-forward import 'package:flutter/widgets.dart'; class FastForwardIcon extends StatelessWidget { const FastForwardIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _FastForwardIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _FastForwardIconPainter extends CustomPainter { _FastForwardIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(2.854, 12.854) ..cubicTo(2.754, 12.953, 2.636, 13.003, 2.5, 13.003) ..cubicTo(2.364, 13.003, 2.246, 12.953, 2.146, 12.854) ..cubicTo(2.049, 12.756, 2, 12.638, 2, 12.5) ..lineTo(2, 2.5) ..cubicTo(2, 2.359, 2.048, 2.241, 2.144, 2.144) ..cubicTo(2.241, 2.048, 2.359, 2, 2.5, 2) ..cubicTo(2.638, 2, 2.756, 2.049, 2.854, 2.146) ..lineTo(7, 6.293) ..lineTo(7, 2.5) ..cubicTo(7, 2.359, 7.048, 2.241, 7.144, 2.144) ..cubicTo(7.241, 2.048, 7.359, 2, 7.5, 2) ..cubicTo(7.638, 2, 7.756, 2.049, 7.854, 2.146) ..lineTo(12.854, 7.146) ..cubicTo(12.953, 7.246, 13.003, 7.364, 13.003, 7.5) ..cubicTo(13.003, 7.636, 12.953, 7.754, 12.854, 7.854) ..lineTo(7.854, 12.854) ..cubicTo(7.754, 12.953, 7.636, 13.003, 7.5, 13.003) ..cubicTo(7.364, 13.003, 7.246, 12.953, 7.146, 12.854) ..cubicTo(7.049, 12.756, 7, 12.638, 7, 12.5) ..lineTo(7, 8.707) ..lineTo(2.854, 12.854) ..close() ..moveTo(3, 11.293) ..lineTo(6.793, 7.5) ..lineTo(3, 3.707) ..lineTo(3, 11.293) ..close() ..moveTo(11.793, 7.5) ..lineTo(8, 3.707) ..lineTo(8, 11.293) ..lineTo(11.793, 7.5) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_FastForwardIconPainter old) => old.color != color; } ```