Gentleface › Design › bring-forward-stack
bring-forward-stack icon
bring-forward-stackBring forward stack: bring forward. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.
Code line-round
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path 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"/></svg>
// Gentleface "bring-forward-stack" (line-round), MIT. https://gentleface.com/icons/bring-forward-stack
import type { SVGProps } from 'react';
export function BringForwardStackIcon(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="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" />
</svg>
);
}Vue: see /icons/bring-forward-stack.md
Svelte: see /icons/bring-forward-stack.md
HTML img: see /icons/bring-forward-stack.md
CSS: see /icons/bring-forward-stack.md
Data URL: see /icons/bring-forward-stack.md
Sprite: see /icons/bring-forward-stack.md
SwiftUI: see /icons/bring-forward-stack.md
Compose: see /icons/bring-forward-stack.md
Android XML: see /icons/bring-forward-stack.md
Flutter: see /icons/bring-forward-stack.md
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. 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. More in how to use.
Meaning
- 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
- Category
- Design
- Component name
BringForwardStackIcon- History
- added
Family 4
More design icons
align-horizontal-center align-objects-bottom align-objects-bottom-three align-objects-left align-objects-left-three align-objects-right align-objects-right-three align-objects-top align-objects-top-three align-vertical-center angle animation animation-off auto-layout-horizontal auto-layout-vertical auto-layout-wrap · all design icons
For agents
Metadata: /icons/bring-forward-stack.json · Markdown: /icons/bring-forward-stack.md · SVG: https://gentleface.com/svg/{style}/16/bring-forward-stack.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/bring-forward-stack.png