# frame-forward icon Frame forward. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/frame-forward - Category: Audio & video - Use it for: next frame, frame advance - Tags: frame, next, step, forward, advance, video, editor, playback - Component name: FrameForwardIcon - Added: 2026-11-12 ## Files Each icon is drawn on the 16 px grid, and most also on the 20 and 24 px grids (at 24 in three weights: light 1 px, regular 1.5 px, bold 2 px). Show the drawing made for your size, or an exact multiple of it, on whole pixels: 16 for 16 and 32 px, 20 for 20 and 40, 24 for 24 and 48. A size in between or a fractional position blurs it. The code on each icon page is the 16 px drawing, an SVG with fill="currentColor"; the icon page's downloads follow its Grid switch, and npm has the 20 and 24 px drawings too. - line-round: https://gentleface.com/svg/line-round/16/frame-forward.svg · PNG https://gentleface.com/png/line-round/16/frame-forward.png · https://gentleface.com/png/line-round/32/frame-forward.png · https://gentleface.com/png/line-round/48/frame-forward.png - line-soft: https://gentleface.com/svg/line-soft/16/frame-forward.svg · PNG https://gentleface.com/png/line-soft/16/frame-forward.png · https://gentleface.com/png/line-soft/32/frame-forward.png · https://gentleface.com/png/line-soft/48/frame-forward.png - line-sharp: https://gentleface.com/svg/line-sharp/16/frame-forward.svg · PNG https://gentleface.com/png/line-sharp/16/frame-forward.png · https://gentleface.com/png/line-sharp/32/frame-forward.png · https://gentleface.com/png/line-sharp/48/frame-forward.png - solid-round: https://gentleface.com/svg/solid-round/16/frame-forward.svg · PNG https://gentleface.com/png/solid-round/16/frame-forward.png · https://gentleface.com/png/solid-round/32/frame-forward.png · https://gentleface.com/png/solid-round/48/frame-forward.png - solid-soft: https://gentleface.com/svg/solid-soft/16/frame-forward.svg · PNG https://gentleface.com/png/solid-soft/16/frame-forward.png · https://gentleface.com/png/solid-soft/32/frame-forward.png · https://gentleface.com/png/solid-soft/48/frame-forward.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/frame-forward.svg · PNG https://gentleface.com/png/solid-sharp/16/frame-forward.png · https://gentleface.com/png/solid-sharp/32/frame-forward.png · https://gentleface.com/png/solid-sharp/48/frame-forward.png The SVG of every style: https://gentleface.com/icons/frame-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 "frame-forward" (line-round), MIT. https://gentleface.com/icons/frame-forward import type { SVGProps } from 'react'; export function FrameForwardIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "frame-forward" (line-round), MIT. https://gentleface.com/icons/frame-forward. Takes the text color. */ .icon-frame-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.144 2.144C2.241 2.048 2.359 2 2.5 2C2.641 2 2.759 2.048 2.856 2.144C2.952 2.241 3 2.359 3 2.5L3 12.5C3 12.641 2.952 12.759 2.856 12.856C2.759 12.952 2.641 13 2.5 13C2.359 13 2.241 12.952 2.144 12.856C2.048 12.759 2 12.641 2 12.5L2 2.5C2 2.359 2.048 2.241 2.144 2.144ZM5.765 12.924C5.645 12.999 5.519 13.021 5.387 12.99C5.254 12.96 5.151 12.885 5.076 12.765C5.025 12.684 5 12.596 5 12.5L5 2.5C5 2.359 5.048 2.241 5.144 2.144C5.241 2.048 5.359 2 5.5 2C5.596 2 5.684 2.025 5.765 2.076L13.765 7.076C13.885 7.151 13.96 7.254 13.99 7.387C14.021 7.519 13.999 7.645 13.924 7.765C13.883 7.83 13.83 7.883 13.765 7.924L5.765 12.924ZM6 3.402L6 11.598L12.557 7.5L6 3.402Z'/%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.144 2.144C2.241 2.048 2.359 2 2.5 2C2.641 2 2.759 2.048 2.856 2.144C2.952 2.241 3 2.359 3 2.5L3 12.5C3 12.641 2.952 12.759 2.856 12.856C2.759 12.952 2.641 13 2.5 13C2.359 13 2.241 12.952 2.144 12.856C2.048 12.759 2 12.641 2 12.5L2 2.5C2 2.359 2.048 2.241 2.144 2.144ZM5.765 12.924C5.645 12.999 5.519 13.021 5.387 12.99C5.254 12.96 5.151 12.885 5.076 12.765C5.025 12.684 5 12.596 5 12.5L5 2.5C5 2.359 5.048 2.241 5.144 2.144C5.241 2.048 5.359 2 5.5 2C5.596 2 5.684 2.025 5.765 2.076L13.765 7.076C13.885 7.151 13.96 7.254 13.99 7.387C14.021 7.519 13.999 7.645 13.924 7.765C13.883 7.83 13.83 7.883 13.765 7.924L5.765 12.924ZM6 3.402L6 11.598L12.557 7.5L6 3.402Z'/%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.144 2.144C2.241 2.048 2.359 2 2.5 2C2.641 2 2.759 2.048 2.856 2.144C2.952 2.241 3 2.359 3 2.5L3 12.5C3 12.641 2.952 12.759 2.856 12.856C2.759 12.952 2.641 13 2.5 13C2.359 13 2.241 12.952 2.144 12.856C2.048 12.759 2 12.641 2 12.5L2 2.5C2 2.359 2.048 2.241 2.144 2.144ZM5.765 12.924C5.645 12.999 5.519 13.021 5.387 12.99C5.254 12.96 5.151 12.885 5.076 12.765C5.025 12.684 5 12.596 5 12.5L5 2.5C5 2.359 5.048 2.241 5.144 2.144C5.241 2.048 5.359 2 5.5 2C5.596 2 5.684 2.025 5.765 2.076L13.765 7.076C13.885 7.151 13.96 7.254 13.99 7.387C14.021 7.519 13.999 7.645 13.924 7.765C13.883 7.83 13.83 7.883 13.765 7.924L5.765 12.924ZM6 3.402L6 11.598L12.557 7.5L6 3.402Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "frame-forward" (line-round), MIT. https://gentleface.com/icons/frame-forward import SwiftUI struct FrameForwardIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 2.144, y: 2.144)) 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.856, y: 2.144), control1: CGPoint(x: 2.641, y: 2), control2: CGPoint(x: 2.759, y: 2.048)) p.addCurve(to: CGPoint(x: 3, y: 2.5), control1: CGPoint(x: 2.952, y: 2.241), control2: CGPoint(x: 3, y: 2.359)) p.addLine(to: CGPoint(x: 3, y: 12.5)) p.addCurve(to: CGPoint(x: 2.856, y: 12.856), control1: CGPoint(x: 3, y: 12.641), control2: CGPoint(x: 2.952, y: 12.759)) p.addCurve(to: CGPoint(x: 2.5, y: 13), control1: CGPoint(x: 2.759, y: 12.952), control2: CGPoint(x: 2.641, y: 13)) p.addCurve(to: CGPoint(x: 2.144, y: 12.856), control1: CGPoint(x: 2.359, y: 13), control2: CGPoint(x: 2.241, y: 12.952)) p.addCurve(to: CGPoint(x: 2, y: 12.5), control1: CGPoint(x: 2.048, y: 12.759), control2: CGPoint(x: 2, y: 12.641)) 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.closeSubpath() p.move(to: CGPoint(x: 5.765, y: 12.924)) p.addCurve(to: CGPoint(x: 5.387, y: 12.99), control1: CGPoint(x: 5.645, y: 12.999), control2: CGPoint(x: 5.519, y: 13.021)) p.addCurve(to: CGPoint(x: 5.076, y: 12.765), control1: CGPoint(x: 5.254, y: 12.96), control2: CGPoint(x: 5.151, y: 12.885)) p.addCurve(to: CGPoint(x: 5, y: 12.5), control1: CGPoint(x: 5.025, y: 12.684), control2: CGPoint(x: 5, y: 12.596)) p.addLine(to: CGPoint(x: 5, y: 2.5)) p.addCurve(to: CGPoint(x: 5.144, y: 2.144), control1: CGPoint(x: 5, y: 2.359), control2: CGPoint(x: 5.048, y: 2.241)) p.addCurve(to: CGPoint(x: 5.5, y: 2), control1: CGPoint(x: 5.241, y: 2.048), control2: CGPoint(x: 5.359, y: 2)) p.addCurve(to: CGPoint(x: 5.765, y: 2.076), control1: CGPoint(x: 5.596, y: 2), control2: CGPoint(x: 5.684, y: 2.025)) p.addLine(to: CGPoint(x: 13.765, y: 7.076)) p.addCurve(to: CGPoint(x: 13.99, y: 7.387), control1: CGPoint(x: 13.885, y: 7.151), control2: CGPoint(x: 13.96, y: 7.254)) p.addCurve(to: CGPoint(x: 13.924, y: 7.765), control1: CGPoint(x: 14.021, y: 7.519), control2: CGPoint(x: 13.999, y: 7.645)) p.addCurve(to: CGPoint(x: 13.765, y: 7.924), control1: CGPoint(x: 13.883, y: 7.83), control2: CGPoint(x: 13.83, y: 7.883)) p.addLine(to: CGPoint(x: 5.765, y: 12.924)) p.closeSubpath() p.move(to: CGPoint(x: 6, y: 3.402)) p.addLine(to: CGPoint(x: 6, y: 11.598)) p.addLine(to: CGPoint(x: 12.557, y: 7.5)) p.addLine(to: CGPoint(x: 6, y: 3.402)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // FrameForwardIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "frame-forward" (line-round), MIT. https://gentleface.com/icons/frame-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 FrameForwardIcon: ImageVector by lazy { ImageVector.Builder( name = "frame-forward", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M2.144 2.144C2.241 2.048 2.359 2 2.5 2C2.641 2 2.759 2.048 2.856 2.144C2.952 2.241 3 2.359 3 2.5L3 12.5C3 12.641 2.952 12.759 2.856 12.856C2.759 12.952 2.641 13 2.5 13C2.359 13 2.241 12.952 2.144 12.856C2.048 12.759 2 12.641 2 12.5L2 2.5C2 2.359 2.048 2.241 2.144 2.144ZM5.765 12.924C5.645 12.999 5.519 13.021 5.387 12.99C5.254 12.96 5.151 12.885 5.076 12.765C5.025 12.684 5 12.596 5 12.5L5 2.5C5 2.359 5.048 2.241 5.144 2.144C5.241 2.048 5.359 2 5.5 2C5.596 2 5.684 2.025 5.765 2.076L13.765 7.076C13.885 7.151 13.96 7.254 13.99 7.387C14.021 7.519 13.999 7.645 13.924 7.765C13.883 7.83 13.83 7.883 13.765 7.924L5.765 12.924ZM6 3.402L6 11.598L12.557 7.5L6 3.402Z"), fill = SolidColor(Color.Black), ).build() } // Icon(FrameForwardIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "frame-forward" (line-round), MIT. https://gentleface.com/icons/frame-forward import 'package:flutter/widgets.dart'; class FrameForwardIcon extends StatelessWidget { const FrameForwardIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _FrameForwardIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _FrameForwardIconPainter extends CustomPainter { _FrameForwardIconPainter(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.144, 2.144) ..cubicTo(2.241, 2.048, 2.359, 2, 2.5, 2) ..cubicTo(2.641, 2, 2.759, 2.048, 2.856, 2.144) ..cubicTo(2.952, 2.241, 3, 2.359, 3, 2.5) ..lineTo(3, 12.5) ..cubicTo(3, 12.641, 2.952, 12.759, 2.856, 12.856) ..cubicTo(2.759, 12.952, 2.641, 13, 2.5, 13) ..cubicTo(2.359, 13, 2.241, 12.952, 2.144, 12.856) ..cubicTo(2.048, 12.759, 2, 12.641, 2, 12.5) ..lineTo(2, 2.5) ..cubicTo(2, 2.359, 2.048, 2.241, 2.144, 2.144) ..close() ..moveTo(5.765, 12.924) ..cubicTo(5.645, 12.999, 5.519, 13.021, 5.387, 12.99) ..cubicTo(5.254, 12.96, 5.151, 12.885, 5.076, 12.765) ..cubicTo(5.025, 12.684, 5, 12.596, 5, 12.5) ..lineTo(5, 2.5) ..cubicTo(5, 2.359, 5.048, 2.241, 5.144, 2.144) ..cubicTo(5.241, 2.048, 5.359, 2, 5.5, 2) ..cubicTo(5.596, 2, 5.684, 2.025, 5.765, 2.076) ..lineTo(13.765, 7.076) ..cubicTo(13.885, 7.151, 13.96, 7.254, 13.99, 7.387) ..cubicTo(14.021, 7.519, 13.999, 7.645, 13.924, 7.765) ..cubicTo(13.883, 7.83, 13.83, 7.883, 13.765, 7.924) ..lineTo(5.765, 12.924) ..close() ..moveTo(6, 3.402) ..lineTo(6, 11.598) ..lineTo(12.557, 7.5) ..lineTo(6, 3.402) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_FrameForwardIconPainter old) => old.color != color; } ```