Line Style Sketch icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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.75001 4C2.3358 4 2.00001 4.33579 2.00001 4.75C2.00001 5.16421 2.3358 5.5 2.75001 5.5H21.25C21.6642 5.5 22 5.16421 22 4.75C22 4.33579 21.6642 4 21.25 4H2.75001ZM5.52226 10.7998C6.40523 10.4251 7.40685 10 8.83446 10C10.2621 10 11.2637 10.4251 12.1467 10.7998L12.1697 10.8096C13.0485 11.1825 13.8093 11.5 14.9189 11.5C15.8974 11.5 16.6114 11.2535 17.4253 10.9726C17.5404 10.9329 17.6579 10.8923 17.778 10.8518C18.7574 10.5215 19.8482 10.2291 21.3859 10.5124C21.7933 10.5875 22.0627 10.9786 21.9876 11.3859C21.9125 11.7933 21.5215 12.0626 21.1141 11.9876C19.9385 11.7709 19.1313 11.9784 18.2573 12.2732C18.15 12.3094 18.0404 12.3475 17.9281 12.3866C17.1161 12.669 16.1648 13 14.9189 13C13.4913 13 12.4897 12.5749 11.6067 12.2002L11.5837 12.1904C10.7049 11.8175 9.94409 11.5 8.83446 11.5C7.72482 11.5 6.96402 11.8175 6.08521 12.1904L6.06221 12.2002C5.17924 12.5749 4.17762 13 2.75001 13C2.3358 13 2.00001 12.6642 2.00001 12.25C2.00001 11.8358 2.3358 11.5 2.75001 11.5C3.85965 11.5 4.62045 11.1825 5.49926 10.8096L5.52226 10.7998ZM21.8858 17.3522C21.6662 17.0011 21.2036 16.8945 20.8524 17.1141C20.8218 17.133 20.791 17.1516 20.76 17.17C20.6963 17.2079 20.6019 17.2631 20.4826 17.3297C20.2435 17.4634 19.908 17.6414 19.523 17.8189C18.7234 18.1874 17.81 18.5 17.1389 18.5C16.5221 18.5 16.0906 18.2454 15.4811 17.8642L15.4431 17.8404C14.8588 17.4745 14.101 17 13.0278 17C11.9665 17 11.1727 17.4647 10.5536 17.8272L10.5102 17.8526C9.85334 18.2368 9.37712 18.5 8.75001 18.5C8.4405 18.5 8.28652 18.435 8.19346 18.3775C8.07952 18.3071 7.989 18.2096 7.81928 18.0117L7.80142 17.9909C7.64942 17.8134 7.42308 17.549 7.09473 17.3463C6.73237 17.1225 6.29718 17 5.75001 17C4.67789 17 3.77716 17.4658 3.17747 17.8855C2.87211 18.0992 2.62852 18.3123 2.4601 18.473C2.37553 18.5537 2.30894 18.6221 2.262 18.6721C2.23559 18.7002 2.20975 18.7288 2.18423 18.7577L2.18224 18.76L2.18075 18.7617C1.91107 19.0761 1.94732 19.5496 2.26172 19.8193C2.57551 20.0884 3.04781 20.0528 3.31775 19.7401L3.31871 19.739C3.33073 19.7255 3.34293 19.7122 3.35529 19.699C3.38541 19.667 3.43272 19.6182 3.49555 19.5583C3.62191 19.4377 3.80707 19.2758 4.03754 19.1145C4.50951 18.7842 5.10878 18.5 5.75001 18.5C6.05953 18.5 6.2135 18.565 6.30656 18.6225C6.42051 18.6929 6.51103 18.7904 6.68075 18.9883L6.69861 19.0091C6.85061 19.1866 7.07694 19.451 7.4053 19.6537C7.76765 19.8775 8.20285 20 8.75001 20C9.81132 20 10.6051 19.5353 11.2242 19.1728L11.2676 19.1474C11.9245 18.7632 12.4007 18.5 13.0278 18.5C13.6446 18.5 14.0761 18.7546 14.6856 19.1358L14.7236 19.1596C15.3079 19.5255 16.0657 20 17.1389 20C18.1691 20 19.3233 19.5626 20.1509 19.1811C20.5795 18.9836 20.9505 18.7866 21.2146 18.639C21.3469 18.5651 21.4531 18.503 21.5272 18.4589C21.5676 18.4349 21.6079 18.4107 21.6478 18.3858C21.9989 18.1662 22.1055 17.7034 21.8858 17.3522Z" 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_sketch_24_regular.svg";

Details

Keywords

stylecreateeditdraw