Padding Left icon
Used to represent spacing in-between elements. Contains direction variants. The Padding Left 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 Padding Left 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 { PaddingLeft24Regular, PaddingLeft24Filled } from "@fluentui/react-icons";
export function Example() {
return <PaddingLeft24Regular aria-label="Padding Left" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_padding_left_24_regular.svg" width="24" height="24" alt="Padding Left"> 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="M2.75 4.5C2.33579 4.5 2 4.83579 2 5.25V6.11667C2 6.53088 2.33579 6.86667 2.75 6.86667C3.16421 6.86667 3.5 6.53088 3.5 6.11667L3.5 5.25C3.5 4.83579 3.16421 4.5 2.75 4.5ZM2.75 7.96667C2.33579 7.96667 2 8.30245 2 8.71667V10.45C2 10.8642 2.33579 11.2 2.75 11.2C3.16421 11.2 3.5 10.8642 3.5 10.45V8.71667C3.5 8.30245 3.16421 7.96667 2.75 7.96667ZM2.75 12.3C2.33579 12.3 2 12.6358 2 13.05V14.7833C2 15.1975 2.33579 15.5333 2.75 15.5333C3.16421 15.5333 3.5 15.1975 3.5 14.7833L3.5 13.05C3.5 12.6358 3.16421 12.3 2.75 12.3ZM2.75 16.6333C2.33579 16.6333 2 16.9691 2 17.3833V18.25C2 18.6642 2.33579 19 2.75 19C3.16421 19 3.5 18.6642 3.5 18.25V17.3833C3.5 16.9691 3.16421 16.6333 2.75 16.6333ZM21.25 4.5C20.8358 4.5 20.5 4.83579 20.5 5.25V18.25C20.5 18.6642 20.8358 19 21.25 19C21.6642 19 22 18.6642 22 18.25V5.25C22 4.83579 21.6642 4.5 21.25 4.5ZM5.21967 12.2803C4.92678 11.9874 4.92678 11.5126 5.21967 11.2197L10.2197 6.21967C10.5126 5.92678 10.9874 5.92678 11.2803 6.21967C11.5732 6.51256 11.5732 6.98744 11.2803 7.28033L7.56066 11L18.25 11C18.6642 11 19 11.3358 19 11.75C19 12.1642 18.6642 12.5 18.25 12.5L7.56066 12.5L11.2803 16.2197C11.5732 16.5126 11.5732 16.9874 11.2803 17.2803C10.9874 17.5732 10.5126 17.5732 10.2197 17.2803L5.21967 12.2803Z" 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/padding_left_24_regular.svg";Details
| Name | Padding Left |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_padding_left_24_regular.svg |
| Filled file | ic_fluent_padding_left_24_filled.svg |
| React components | PaddingLeft24Regular, PaddingLeft24Filled |
| License | MIT (© Microsoft Corporation) |