Position To Front icon
Used in canvas edit scenarios when layering. The Position To Front icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Position To Front icon in React
Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.
npm install @fluentui/react-icons
import { PositionToFront24Regular, PositionToFront24Filled } from "@fluentui/react-icons";
export function Example() {
return <PositionToFront24Regular aria-label="Position To Front" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_position_to_front_24_regular.svg" width="24" height="24" alt="Position To Front"> Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 3.75C1 2.23122 2.23122 1 3.75 1H7.25C8.76878 1 10 2.23122 10 3.75V5H9.25C8.99409 5 8.74346 5.02262 8.5 5.06597V3.75C8.5 3.05964 7.94036 2.5 7.25 2.5H3.75C3.05964 2.5 2.5 3.05964 2.5 3.75V7.25C2.5 7.94036 3.05964 8.5 3.75 8.5H5.06597C5.02262 8.74346 5 8.99409 5 9.25V10H3.75C2.23122 10 1 8.76878 1 7.25V3.75ZM14 19V20.25C14 21.7688 15.2312 23 16.75 23H20.25C21.7688 23 23 21.7688 23 20.25V16.75C23 15.2312 21.7688 14 20.25 14H19V14.75C19 15.0059 18.9774 15.2565 18.934 15.5H20.25C20.9404 15.5 21.5 16.0596 21.5 16.75V20.25C21.5 20.9404 20.9404 21.5 20.25 21.5H16.75C16.0596 21.5 15.5 20.9404 15.5 20.25V18.934C15.2565 18.9774 15.0059 19 14.75 19H14ZM9.25 6C7.45507 6 6 7.45507 6 9.25V14.75C6 16.5449 7.45507 18 9.25 18H14.75C16.5449 18 18 16.5449 18 14.75V9.25C18 7.45507 16.5449 6 14.75 6H9.25ZM11.5625 7.5L7.5 11.5625V9.68382L9.68382 7.5H11.5625ZM7.5 13.6838L13.6838 7.5H14.75C14.9899 7.5 15.2186 7.54829 15.4268 7.63569L7.63568 15.4268C7.54829 15.2186 7.5 14.9899 7.5 14.75V13.6838ZM8.75485 16.429L16.429 8.75486C16.4752 8.91185 16.5 9.07803 16.5 9.25V10.5625L10.5625 16.5H9.25C9.07803 16.5 8.91185 16.4752 8.75485 16.429ZM14.6875 16.5H12.6838L16.5 12.6838V14.75L16.4668 14.7168L14.6855 16.498L14.6875 16.5Z" fill="currentColor"/></svg>Use it from the SVG package
Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:
npm install @fluentui/svg-icons
import icon from "@fluentui/svg-icons/icons/position_to_front_24_regular.svg";Details
| Name | Position To Front |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_position_to_front_24_regular.svg |
| Filled file | ic_fluent_position_to_front_24_filled.svg |
| React components | PositionToFront24Regular, PositionToFront24Filled |
| License | MIT (© Microsoft Corporation) |