Text Add Space Before icon

Use the Text Add Space Before 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 { TextAddSpaceBefore24Regular, TextAddSpaceBefore24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TextAddSpaceBefore24Regular aria-label="Text Add Space Before" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_text_add_space_before_24_regular.svg" width="24" height="24" alt="Text Add Space Before">

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="M9.46967 6.28033C9.17678 5.98744 9.17678 5.51256 9.46967 5.21967C9.76256 4.92678 10.2374 4.92678 10.5303 5.21967L12 6.68934L13.4697 5.21967C13.7626 4.92678 14.2374 4.92678 14.5303 5.21967C14.8232 5.51256 14.8232 5.98744 14.5303 6.28033L12.5303 8.28033C12.2374 8.57322 11.7626 8.57322 11.4697 8.28033L9.46967 6.28033ZM3 11.75C3 11.3358 3.33579 11 3.75 11H20.25C20.6642 11 21 11.3358 21 11.75C21 12.1642 20.6642 12.5 20.25 12.5H3.75C3.33579 12.5 3 12.1642 3 11.75ZM3 17.75C3 17.3358 3.33579 17 3.75 17H20.25C20.6642 17 21 17.3358 21 17.75C21 18.1642 20.6642 18.5 20.25 18.5H3.75C3.33579 18.5 3 18.1642 3 17.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/text_add_space_before_24_regular.svg";

Details

Keywords

typetexttypographyeditcreatetopbottomafterbefore