Text List Abc Lowercase LTR icon

Use the Text List Abc Lowercase LTR 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 { TextListAbcLowercaseLtr24Regular, TextListAbcLowercaseLtr24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TextListAbcLowercaseLtr24Regular aria-label="Text List Abc Lowercase LTR" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_text_list_abc_lowercase_ltr_24_regular.svg" width="24" height="24" alt="Text List Abc Lowercase LTR">

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="M4.62191 3.75C4.12091 3.75 3.86687 3.89516 3.79131 3.98445C3.52376 4.30066 3.05052 4.3401 2.73432 4.07254C2.41811 3.80499 2.37867 3.33176 2.64622 3.01555C3.13476 2.43818 3.92628 2.25 4.62191 2.25C5.20389 2.25 5.76338 2.41206 6.19786 2.71286C6.62941 3.01162 6.99691 3.49866 6.99691 4.125V4.18141C6.99895 4.204 7 4.22688 7 4.25V7.25C7 7.66421 6.66421 8 6.25 8C6.01579 8 5.80666 7.89264 5.66912 7.72446C5.32981 7.90052 4.94438 8 4.53571 8H4.375C3.33947 8 2.5 7.16053 2.5 6.125C2.5 5.08947 3.33947 4.25 4.375 4.25H5.49691V4.125C5.49691 4.12101 5.4968 4.10692 5.4792 4.07811C5.45986 4.04646 5.41935 3.99828 5.34405 3.94615C5.1904 3.83977 4.93739 3.75 4.62191 3.75ZM4.375 5.75C4.16789 5.75 4 5.91789 4 6.125C4 6.33211 4.16789 6.5 4.375 6.5H4.53571C4.99463 6.5 5.37866 6.17943 5.47611 5.75H4.375ZM9 5.75C9 5.33579 9.33579 5 9.75 5H19.25C19.6642 5 20 5.33579 20 5.75C20 6.16421 19.6642 6.5 19.25 6.5H9.75C9.33579 6.5 9 6.16421 9 5.75ZM9 12.25C9 11.8358 9.33579 11.5 9.75 11.5H19.25C19.6642 11.5 20 11.8358 20 12.25C20 12.6642 19.6642 13 19.25 13H9.75C9.33579 13 9 12.6642 9 12.25ZM9 18.75C9 18.3358 9.33579 18 9.75 18H19.25C19.6642 18 20 18.3358 20 18.75C20 19.1642 19.6642 19.5 19.25 19.5H9.75C9.33579 19.5 9 19.1642 9 18.75ZM3.75 9C4.16421 9 4.5 9.33579 4.5 9.75V10.3918C4.78108 10.2947 5.07879 10.25 5.375 10.25C6.68668 10.25 7.75 11.3133 7.75 12.625C7.75 13.9367 6.68668 15 5.375 15C5.00289 15 4.62843 14.9295 4.28752 14.773C4.15127 14.913 3.96079 15 3.75 15C3.33579 15 3 14.6642 3 14.25V9.75C3 9.33579 3.33579 9 3.75 9ZM4.5 12.625C4.5 12.9893 4.61638 13.1837 4.73404 13.2921C4.8618 13.4097 5.07291 13.5 5.375 13.5C5.85825 13.5 6.25 13.1082 6.25 12.625C6.25 12.1418 5.85825 11.75 5.375 11.75C5.07291 11.75 4.8618 11.8403 4.73404 11.9579C4.61638 12.0663 4.5 12.2607 4.5 12.625ZM4 19.25C4 18.8444 4.12151 18.5395 4.30168 18.3439C4.47254 18.1583 4.76071 18 5.25 18C5.70162 18 5.98034 18.1363 6.1523 18.2989C6.45328 18.5835 6.92797 18.5701 7.21254 18.2692C7.49711 17.9682 7.4838 17.4935 7.18281 17.2089C6.69229 16.7452 6.02598 16.5 5.25 16.5C4.40595 16.5 3.69412 16.7894 3.19832 17.3277C2.71183 17.8559 2.5 18.5511 2.5 19.25C2.5 19.9489 2.71183 20.6441 3.19832 21.1723C3.69412 21.7106 4.40595 22 5.25 22C6.02598 22 6.69229 21.7548 7.18281 21.2911C7.4838 21.0065 7.49711 20.5318 7.21254 20.2308C6.92797 19.9299 6.45328 19.9165 6.1523 20.2011C5.98034 20.3637 5.70162 20.5 5.25 20.5C4.76071 20.5 4.47254 20.3417 4.30168 20.1561C4.12151 19.9605 4 19.6556 4 19.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/text_list_abc_lowercase_ltr_24_regular.svg";

Details