Position To Back icon
Used in canvas edit scenarios when layering. The Position To Back 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 Back 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 { PositionToBack24Regular, PositionToBack24Filled } from "@fluentui/react-icons";
export function Example() {
return <PositionToBack24Regular aria-label="Position To Back" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_position_to_back_24_regular.svg" width="24" height="24" alt="Position To Back"> 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="M14 16.75C14 15.2312 15.2312 14 16.75 14H20.25C21.7688 14 23 15.2312 23 16.75V20.25C23 21.7688 21.7688 23 20.25 23H16.75C15.2312 23 14 21.7688 14 20.25V16.75ZM16.75 15.5C16.0596 15.5 15.5 16.0596 15.5 16.75V20.25C15.5 20.9404 16.0596 21.5 16.75 21.5H20.25C20.9404 21.5 21.5 20.9404 21.5 20.25V16.75C21.5 16.0596 20.9404 15.5 20.25 15.5H16.75ZM6 11V14.75C6 16.5449 7.45507 18 9.25 18H13V16.75C13 16.666 13.0028 16.5826 13.0082 16.5H12.6838L13.0505 16.1334C13.3114 14.5563 14.5563 13.3114 16.1334 13.0505L16.5 12.6838V13.0082C16.5826 13.0028 16.666 13 16.75 13H18V9.25C18 7.45507 16.5449 6 14.75 6H11V7.25C11 7.33401 10.9972 7.41737 10.9918 7.5H11.5625L10.8842 8.17828C10.5467 9.50349 9.50349 10.5467 8.17828 10.8842L7.5 11.5625V10.9918C7.41737 10.9972 7.33401 11 7.25 11H6ZM13.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.6838L13.6838 7.5ZM9.25 16.5C9.07803 16.5 8.91185 16.4752 8.75485 16.429L16.429 8.75486C16.4752 8.91185 16.5 9.07803 16.5 9.25V10.5625L10.5625 16.5H9.25ZM1 3.75C1 2.23122 2.23122 1 3.75 1H7.25C8.76878 1 10 2.23122 10 3.75V7.25C10 8.76878 8.76878 10 7.25 10H3.75C2.23122 10 1 8.76878 1 7.25V3.75ZM3.75 2.5C3.05964 2.5 2.5 3.05964 2.5 3.75V7.25C2.5 7.94036 3.05964 8.5 3.75 8.5H7.25C7.94036 8.5 8.5 7.94036 8.5 7.25V3.75C8.5 3.05964 7.94036 2.5 7.25 2.5H3.75Z" 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_back_24_regular.svg";Details
| Name | Position To Back |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_position_to_back_24_regular.svg |
| Filled file | ic_fluent_position_to_back_24_filled.svg |
| React components | PositionToBack24Regular, PositionToBack24Filled |
| License | MIT (© Microsoft Corporation) |