Text List Abc Uppercase LTR icon

Use the Text List Abc Uppercase 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 { TextListAbcUppercaseLtr24Regular, TextListAbcUppercaseLtr24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_text_list_abc_uppercase_ltr_24_regular.svg" width="24" height="24" alt="Text List Abc Uppercase 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="M5.68536 2.4454C5.56499 2.17455 5.2964 2 5 2C4.70361 2 4.43502 2.17455 4.31465 2.4454L2.76571 5.93051C2.76097 5.94056 2.75644 5.95074 2.75214 5.96104L2.31465 6.9454C2.14642 7.32391 2.31689 7.76713 2.6954 7.93536C3.07391 8.10359 3.51713 7.93312 3.68536 7.5546L3.93185 7H6.06815L6.31465 7.5546C6.48287 7.93312 6.92609 8.10359 7.30461 7.93536C7.68312 7.76713 7.85359 7.32391 7.68536 6.9454L7.24787 5.96104C7.24357 5.95074 7.23904 5.94056 7.2343 5.93051L5.68536 2.4454ZM5 4.59666L5.40149 5.5H4.59852L5 4.59666ZM9.75 5C9.33579 5 9 5.33579 9 5.75C9 6.16421 9.33579 6.5 9.75 6.5H19.25C19.6642 6.5 20 6.16421 20 5.75C20 5.33579 19.6642 5 19.25 5H9.75ZM9.75 11.5C9.33579 11.5 9 11.8358 9 12.25C9 12.6642 9.33579 13 9.75 13H19.25C19.6642 13 20 12.6642 20 12.25C20 11.8358 19.6642 11.5 19.25 11.5H9.75ZM9.75 18C9.33579 18 9 18.3358 9 18.75C9 19.1642 9.33579 19.5 9.75 19.5H19.25C19.6642 19.5 20 19.1642 20 18.75C20 18.3358 19.6642 18 19.25 18H9.75ZM3.75 9H5.375C6.41054 9 7.25 9.83947 7.25 10.875C7.25 11.2259 7.15361 11.5543 6.98585 11.8351C7.30452 12.1712 7.5 12.6253 7.5 13.125C7.5 14.1605 6.66054 15 5.625 15H3.75C3.33579 15 3 14.6642 3 14.25V9.75C3 9.33579 3.33579 9 3.75 9ZM4.5 10.5V11.25H5.375C5.58211 11.25 5.75 11.0821 5.75 10.875C5.75 10.6679 5.58211 10.5 5.375 10.5H4.5ZM4.5 12.75V13.5H5.625C5.83211 13.5 6 13.3321 6 13.125C6 12.9179 5.83211 12.75 5.625 12.75H4.5ZM4.33034 17.8841C4.13377 18.1242 4 18.5037 4 19C4 19.4963 4.13377 19.8758 4.33034 20.1159C4.51085 20.3364 4.79131 20.5 5.25 20.5C5.70742 20.5 5.98814 20.3361 6.1693 20.1144C6.32937 19.9186 6.54191 19.75 6.79484 19.75H6.93667C7.45019 19.75 7.84406 20.2311 7.59259 20.6788C7.51687 20.8137 7.42979 20.9425 7.3307 21.0637C6.8452 21.6577 6.12592 22 5.25 22C4.37536 22 3.65582 21.6599 3.16967 21.0661C2.69957 20.4919 2.5 19.7464 2.5 19C2.5 18.2536 2.69957 17.5081 3.16967 16.9339C3.65582 16.3401 4.37536 16 5.25 16C6.12592 16 6.8452 16.3423 7.3307 16.9363C7.42979 17.0575 7.51687 17.1863 7.59259 17.3212C7.84406 17.7689 7.45019 18.25 6.93667 18.25H6.79484C6.54191 18.25 6.32937 18.0814 6.1693 17.8856C5.98814 17.6639 5.70742 17.5 5.25 17.5C4.79131 17.5 4.51085 17.6636 4.33034 17.8841Z" 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_uppercase_ltr_24_regular.svg";

Details