# bring-forward-stack icon Bring forward stack. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/bring-forward-stack - Category: Design - Use it for: bring forward - Built from: variant of bring-forward - Tags: bring forward, arrange, z-order, order, layer, forward, up, move up, stack, overlap, figma, design tool, ui design - Family: bring-forward, bring-to-front, bring-to-front-stack, send-backward - Component name: BringForwardStackIcon - Added: 2026-10-19 ## 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/bring-forward-stack.svg · PNG https://gentleface.com/png/line-round/16/bring-forward-stack.png · https://gentleface.com/png/line-round/32/bring-forward-stack.png · https://gentleface.com/png/line-round/48/bring-forward-stack.png - line-soft: https://gentleface.com/svg/line-soft/16/bring-forward-stack.svg · PNG https://gentleface.com/png/line-soft/16/bring-forward-stack.png · https://gentleface.com/png/line-soft/32/bring-forward-stack.png · https://gentleface.com/png/line-soft/48/bring-forward-stack.png - line-sharp: https://gentleface.com/svg/line-sharp/16/bring-forward-stack.svg · PNG https://gentleface.com/png/line-sharp/16/bring-forward-stack.png · https://gentleface.com/png/line-sharp/32/bring-forward-stack.png · https://gentleface.com/png/line-sharp/48/bring-forward-stack.png - solid-round: https://gentleface.com/svg/solid-round/16/bring-forward-stack.svg · PNG https://gentleface.com/png/solid-round/16/bring-forward-stack.png · https://gentleface.com/png/solid-round/32/bring-forward-stack.png · https://gentleface.com/png/solid-round/48/bring-forward-stack.png - solid-soft: https://gentleface.com/svg/solid-soft/16/bring-forward-stack.svg · PNG https://gentleface.com/png/solid-soft/16/bring-forward-stack.png · https://gentleface.com/png/solid-soft/32/bring-forward-stack.png · https://gentleface.com/png/solid-soft/48/bring-forward-stack.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/bring-forward-stack.svg · PNG https://gentleface.com/png/solid-sharp/16/bring-forward-stack.png · https://gentleface.com/png/solid-sharp/32/bring-forward-stack.png · https://gentleface.com/png/solid-sharp/48/bring-forward-stack.png The SVG of every style: https://gentleface.com/icons/bring-forward-stack.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 "bring-forward-stack" (line-round), MIT. https://gentleface.com/icons/bring-forward-stack import type { SVGProps } from 'react'; export function BringForwardStackIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "bring-forward-stack" (line-round), MIT. https://gentleface.com/icons/bring-forward-stack. Takes the text color. */ .icon-bring-forward-stack { 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='M4 3L8 3C8.276 3 8.512 3.098 8.707 3.293C8.902 3.488 9 3.724 9 4L9 5.5C9 5.641 8.952 5.759 8.856 5.856C8.759 5.952 8.641 6 8.5 6C8.359 6 8.241 5.952 8.144 5.856C8.048 5.759 8 5.641 8 5.5L8 4L4 4L4 8L5.5 8C5.641 8 5.759 8.048 5.856 8.144C5.952 8.241 6 8.359 6 8.5C6 8.641 5.952 8.759 5.856 8.856C5.759 8.952 5.641 9 5.5 9L4 9C3.724 9 3.488 8.902 3.293 8.707C3.098 8.512 3 8.276 3 8L3 4C3 3.724 3.098 3.488 3.293 3.293C3.488 3.098 3.724 3 4 3ZM12.707 7.293C12.902 7.488 13 7.724 13 8L13 12C13 12.276 12.902 12.512 12.707 12.707C12.512 12.902 12.276 13 12 13L8 13C7.724 13 7.488 12.902 7.293 12.707C7.098 12.512 7 12.276 7 12L7 8C7 7.724 7.098 7.488 7.293 7.293C7.488 7.098 7.724 7 8 7L12 7C12.276 7 12.512 7.098 12.707 7.293Z'/%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='M4 3L8 3C8.276 3 8.512 3.098 8.707 3.293C8.902 3.488 9 3.724 9 4L9 5.5C9 5.641 8.952 5.759 8.856 5.856C8.759 5.952 8.641 6 8.5 6C8.359 6 8.241 5.952 8.144 5.856C8.048 5.759 8 5.641 8 5.5L8 4L4 4L4 8L5.5 8C5.641 8 5.759 8.048 5.856 8.144C5.952 8.241 6 8.359 6 8.5C6 8.641 5.952 8.759 5.856 8.856C5.759 8.952 5.641 9 5.5 9L4 9C3.724 9 3.488 8.902 3.293 8.707C3.098 8.512 3 8.276 3 8L3 4C3 3.724 3.098 3.488 3.293 3.293C3.488 3.098 3.724 3 4 3ZM12.707 7.293C12.902 7.488 13 7.724 13 8L13 12C13 12.276 12.902 12.512 12.707 12.707C12.512 12.902 12.276 13 12 13L8 13C7.724 13 7.488 12.902 7.293 12.707C7.098 12.512 7 12.276 7 12L7 8C7 7.724 7.098 7.488 7.293 7.293C7.488 7.098 7.724 7 8 7L12 7C12.276 7 12.512 7.098 12.707 7.293Z'/%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='M4 3L8 3C8.276 3 8.512 3.098 8.707 3.293C8.902 3.488 9 3.724 9 4L9 5.5C9 5.641 8.952 5.759 8.856 5.856C8.759 5.952 8.641 6 8.5 6C8.359 6 8.241 5.952 8.144 5.856C8.048 5.759 8 5.641 8 5.5L8 4L4 4L4 8L5.5 8C5.641 8 5.759 8.048 5.856 8.144C5.952 8.241 6 8.359 6 8.5C6 8.641 5.952 8.759 5.856 8.856C5.759 8.952 5.641 9 5.5 9L4 9C3.724 9 3.488 8.902 3.293 8.707C3.098 8.512 3 8.276 3 8L3 4C3 3.724 3.098 3.488 3.293 3.293C3.488 3.098 3.724 3 4 3ZM12.707 7.293C12.902 7.488 13 7.724 13 8L13 12C13 12.276 12.902 12.512 12.707 12.707C12.512 12.902 12.276 13 12 13L8 13C7.724 13 7.488 12.902 7.293 12.707C7.098 12.512 7 12.276 7 12L7 8C7 7.724 7.098 7.488 7.293 7.293C7.488 7.098 7.724 7 8 7L12 7C12.276 7 12.512 7.098 12.707 7.293Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "bring-forward-stack" (line-round), MIT. https://gentleface.com/icons/bring-forward-stack import SwiftUI struct BringForwardStackIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 4, y: 3)) p.addLine(to: CGPoint(x: 8, y: 3)) p.addCurve(to: CGPoint(x: 8.707, y: 3.293), control1: CGPoint(x: 8.276, y: 3), control2: CGPoint(x: 8.512, y: 3.098)) p.addCurve(to: CGPoint(x: 9, y: 4), control1: CGPoint(x: 8.902, y: 3.488), control2: CGPoint(x: 9, y: 3.724)) p.addLine(to: CGPoint(x: 9, y: 5.5)) p.addCurve(to: CGPoint(x: 8.856, y: 5.856), control1: CGPoint(x: 9, y: 5.641), control2: CGPoint(x: 8.952, y: 5.759)) p.addCurve(to: CGPoint(x: 8.5, y: 6), control1: CGPoint(x: 8.759, y: 5.952), control2: CGPoint(x: 8.641, y: 6)) p.addCurve(to: CGPoint(x: 8.144, y: 5.856), control1: CGPoint(x: 8.359, y: 6), control2: CGPoint(x: 8.241, y: 5.952)) p.addCurve(to: CGPoint(x: 8, y: 5.5), control1: CGPoint(x: 8.048, y: 5.759), control2: CGPoint(x: 8, y: 5.641)) p.addLine(to: CGPoint(x: 8, y: 4)) p.addLine(to: CGPoint(x: 4, y: 4)) p.addLine(to: CGPoint(x: 4, y: 8)) p.addLine(to: CGPoint(x: 5.5, y: 8)) p.addCurve(to: CGPoint(x: 5.856, y: 8.144), control1: CGPoint(x: 5.641, y: 8), control2: CGPoint(x: 5.759, y: 8.048)) p.addCurve(to: CGPoint(x: 6, y: 8.5), control1: CGPoint(x: 5.952, y: 8.241), control2: CGPoint(x: 6, y: 8.359)) p.addCurve(to: CGPoint(x: 5.856, y: 8.856), control1: CGPoint(x: 6, y: 8.641), control2: CGPoint(x: 5.952, y: 8.759)) p.addCurve(to: CGPoint(x: 5.5, y: 9), control1: CGPoint(x: 5.759, y: 8.952), control2: CGPoint(x: 5.641, y: 9)) p.addLine(to: CGPoint(x: 4, y: 9)) p.addCurve(to: CGPoint(x: 3.293, y: 8.707), control1: CGPoint(x: 3.724, y: 9), control2: CGPoint(x: 3.488, y: 8.902)) p.addCurve(to: CGPoint(x: 3, y: 8), control1: CGPoint(x: 3.098, y: 8.512), control2: CGPoint(x: 3, y: 8.276)) p.addLine(to: CGPoint(x: 3, y: 4)) p.addCurve(to: CGPoint(x: 3.293, y: 3.293), control1: CGPoint(x: 3, y: 3.724), control2: CGPoint(x: 3.098, y: 3.488)) p.addCurve(to: CGPoint(x: 4, y: 3), control1: CGPoint(x: 3.488, y: 3.098), control2: CGPoint(x: 3.724, y: 3)) p.closeSubpath() p.move(to: CGPoint(x: 12.707, y: 7.293)) p.addCurve(to: CGPoint(x: 13, y: 8), control1: CGPoint(x: 12.902, y: 7.488), control2: CGPoint(x: 13, y: 7.724)) p.addLine(to: CGPoint(x: 13, y: 12)) p.addCurve(to: CGPoint(x: 12.707, y: 12.707), control1: CGPoint(x: 13, y: 12.276), control2: CGPoint(x: 12.902, y: 12.512)) p.addCurve(to: CGPoint(x: 12, y: 13), control1: CGPoint(x: 12.512, y: 12.902), control2: CGPoint(x: 12.276, y: 13)) p.addLine(to: CGPoint(x: 8, y: 13)) p.addCurve(to: CGPoint(x: 7.293, y: 12.707), control1: CGPoint(x: 7.724, y: 13), control2: CGPoint(x: 7.488, y: 12.902)) p.addCurve(to: CGPoint(x: 7, y: 12), control1: CGPoint(x: 7.098, y: 12.512), control2: CGPoint(x: 7, y: 12.276)) p.addLine(to: CGPoint(x: 7, y: 8)) p.addCurve(to: CGPoint(x: 7.293, y: 7.293), control1: CGPoint(x: 7, y: 7.724), control2: CGPoint(x: 7.098, y: 7.488)) p.addCurve(to: CGPoint(x: 8, y: 7), control1: CGPoint(x: 7.488, y: 7.098), control2: CGPoint(x: 7.724, y: 7)) p.addLine(to: CGPoint(x: 12, y: 7)) p.addCurve(to: CGPoint(x: 12.707, y: 7.293), control1: CGPoint(x: 12.276, y: 7), control2: CGPoint(x: 12.512, y: 7.098)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // BringForwardStackIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "bring-forward-stack" (line-round), MIT. https://gentleface.com/icons/bring-forward-stack 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 BringForwardStackIcon: ImageVector by lazy { ImageVector.Builder( name = "bring-forward-stack", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M4 3L8 3C8.276 3 8.512 3.098 8.707 3.293C8.902 3.488 9 3.724 9 4L9 5.5C9 5.641 8.952 5.759 8.856 5.856C8.759 5.952 8.641 6 8.5 6C8.359 6 8.241 5.952 8.144 5.856C8.048 5.759 8 5.641 8 5.5L8 4L4 4L4 8L5.5 8C5.641 8 5.759 8.048 5.856 8.144C5.952 8.241 6 8.359 6 8.5C6 8.641 5.952 8.759 5.856 8.856C5.759 8.952 5.641 9 5.5 9L4 9C3.724 9 3.488 8.902 3.293 8.707C3.098 8.512 3 8.276 3 8L3 4C3 3.724 3.098 3.488 3.293 3.293C3.488 3.098 3.724 3 4 3ZM12.707 7.293C12.902 7.488 13 7.724 13 8L13 12C13 12.276 12.902 12.512 12.707 12.707C12.512 12.902 12.276 13 12 13L8 13C7.724 13 7.488 12.902 7.293 12.707C7.098 12.512 7 12.276 7 12L7 8C7 7.724 7.098 7.488 7.293 7.293C7.488 7.098 7.724 7 8 7L12 7C12.276 7 12.512 7.098 12.707 7.293Z"), fill = SolidColor(Color.Black), ).build() } // Icon(BringForwardStackIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "bring-forward-stack" (line-round), MIT. https://gentleface.com/icons/bring-forward-stack import 'package:flutter/widgets.dart'; class BringForwardStackIcon extends StatelessWidget { const BringForwardStackIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _BringForwardStackIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _BringForwardStackIconPainter extends CustomPainter { _BringForwardStackIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(4, 3) ..lineTo(8, 3) ..cubicTo(8.276, 3, 8.512, 3.098, 8.707, 3.293) ..cubicTo(8.902, 3.488, 9, 3.724, 9, 4) ..lineTo(9, 5.5) ..cubicTo(9, 5.641, 8.952, 5.759, 8.856, 5.856) ..cubicTo(8.759, 5.952, 8.641, 6, 8.5, 6) ..cubicTo(8.359, 6, 8.241, 5.952, 8.144, 5.856) ..cubicTo(8.048, 5.759, 8, 5.641, 8, 5.5) ..lineTo(8, 4) ..lineTo(4, 4) ..lineTo(4, 8) ..lineTo(5.5, 8) ..cubicTo(5.641, 8, 5.759, 8.048, 5.856, 8.144) ..cubicTo(5.952, 8.241, 6, 8.359, 6, 8.5) ..cubicTo(6, 8.641, 5.952, 8.759, 5.856, 8.856) ..cubicTo(5.759, 8.952, 5.641, 9, 5.5, 9) ..lineTo(4, 9) ..cubicTo(3.724, 9, 3.488, 8.902, 3.293, 8.707) ..cubicTo(3.098, 8.512, 3, 8.276, 3, 8) ..lineTo(3, 4) ..cubicTo(3, 3.724, 3.098, 3.488, 3.293, 3.293) ..cubicTo(3.488, 3.098, 3.724, 3, 4, 3) ..close() ..moveTo(12.707, 7.293) ..cubicTo(12.902, 7.488, 13, 7.724, 13, 8) ..lineTo(13, 12) ..cubicTo(13, 12.276, 12.902, 12.512, 12.707, 12.707) ..cubicTo(12.512, 12.902, 12.276, 13, 12, 13) ..lineTo(8, 13) ..cubicTo(7.724, 13, 7.488, 12.902, 7.293, 12.707) ..cubicTo(7.098, 12.512, 7, 12.276, 7, 12) ..lineTo(7, 8) ..cubicTo(7, 7.724, 7.098, 7.488, 7.293, 7.293) ..cubicTo(7.488, 7.098, 7.724, 7, 8, 7) ..lineTo(12, 7) ..cubicTo(12.276, 7, 12.512, 7.098, 12.707, 7.293) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_BringForwardStackIconPainter old) => old.color != color; } ```