Padding Right icon

Use the Padding Right 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 { PaddingRight24Regular, PaddingRight24Filled } from "@fluentui/react-icons";

export function Example() {
  return <PaddingRight24Regular aria-label="Padding Right" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_padding_right_24_regular.svg" width="24" height="24" alt="Padding Right">

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.5C3.16421 4.5 3.5 4.83579 3.5 5.25L3.5 18.25C3.5 18.6642 3.16421 19 2.75 19C2.33579 19 2 18.6642 2 18.25V5.25C2 4.83579 2.33579 4.5 2.75 4.5ZM21.25 4.5C21.6642 4.5 22 4.83579 22 5.25V6.11667C22 6.53088 21.6642 6.86667 21.25 6.86667C20.8358 6.86667 20.5 6.53088 20.5 6.11667V5.25C20.5 4.83579 20.8358 4.5 21.25 4.5ZM21.25 7.96667C21.6642 7.96667 22 8.30245 22 8.71667V10.45C22 10.8642 21.6642 11.2 21.25 11.2C20.8358 11.2 20.5 10.8642 20.5 10.45V8.71667C20.5 8.30245 20.8358 7.96667 21.25 7.96667ZM21.25 12.3C21.6642 12.3 22 12.6358 22 13.05V14.7833C22 15.1975 21.6642 15.5333 21.25 15.5333C20.8358 15.5333 20.5 15.1975 20.5 14.7833V13.05C20.5 12.6358 20.8358 12.3 21.25 12.3ZM21.25 16.6333C21.6642 16.6333 22 16.9691 22 17.3833V18.25C22 18.6642 21.6642 19 21.25 19C20.8358 19 20.5 18.6642 20.5 18.25V17.3833C20.5 16.9691 20.8358 16.6333 21.25 16.6333ZM18.7803 12.2803C19.0732 11.9874 19.0732 11.5126 18.7803 11.2197L13.7803 6.21967C13.4874 5.92678 13.0126 5.92678 12.7197 6.21967C12.4268 6.51256 12.4268 6.98744 12.7197 7.28033L16.4393 11L5.75 11C5.33579 11 5 11.3358 5 11.75C5 12.1642 5.33579 12.5 5.75 12.5L16.4393 12.5L12.7197 16.2197C12.4268 16.5126 12.4268 16.9874 12.7197 17.2803C13.0126 17.5732 13.4874 17.5732 13.7803 17.2803L18.7803 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_right_24_regular.svg";

Details

Keywords

marginsspacein-between