Line Style icon

Use the Line Style 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 { LineStyle24Regular, LineStyle24Filled } from "@fluentui/react-icons";

export function Example() {
  return <LineStyle24Regular aria-label="Line Style" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_line_style_24_regular.svg" width="24" height="24" alt="Line Style">

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 5C2.33579 5 2 5.33579 2 5.75C2 6.16421 2.33579 6.5 2.75 6.5H6.25C6.66421 6.5 7 6.16421 7 5.75C7 5.33579 6.66421 5 6.25 5H2.75ZM10.25 5C9.83579 5 9.5 5.33579 9.5 5.75C9.5 6.16421 9.83579 6.5 10.25 6.5H13.75C14.1642 6.5 14.5 6.16421 14.5 5.75C14.5 5.33579 14.1642 5 13.75 5H10.25ZM17.75 5C17.3358 5 17 5.33579 17 5.75C17 6.16421 17.3358 6.5 17.75 6.5H21.25C21.6642 6.5 22 6.16421 22 5.75C22 5.33579 21.6642 5 21.25 5H17.75ZM21.2524 11.5029H2.75244L2.65067 11.5098C2.2846 11.5594 2.00244 11.8732 2.00244 12.2529C2.00244 12.6671 2.33823 13.0029 2.75244 13.0029H21.2524L21.3542 12.9961C21.7203 12.9464 22.0024 12.6326 22.0024 12.2529C22.0024 11.8387 21.6667 11.5029 21.2524 11.5029ZM3.25 16.9999C2.55964 16.9999 2 17.5596 2 18.2499C2 18.9403 2.55964 19.4999 3.25 19.4999H20.75C21.4404 19.4999 22 18.9403 22 18.2499C22 17.5596 21.4404 16.9999 20.75 16.9999H3.25Z" 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/line_style_24_regular.svg";

Details

Keywords

stylecreateeditdraw