Text Case Lowercase icon
Used in general type creation and editing scenarios. Collection includes Text Case Lowercase, Text Case Title, Text Case Uppercase, Text Change Case. The Text Case Lowercase icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Text Case Lowercase 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 { TextCaseLowercase24Regular, TextCaseLowercase24Filled } from "@fluentui/react-icons";
export function Example() {
return <TextCaseLowercase24Regular aria-label="Text Case Lowercase" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_text_case_lowercase_24_regular.svg" width="24" height="24" alt="Text Case Lowercase"> 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="M13.75 3C14.1642 3 14.5 3.33579 14.5 3.75V11.987C15.1848 11.3694 16.0541 11 17 11C19.2091 11 21 13.0147 21 15.5C21 17.9853 19.2091 20 17 20C16.0541 20 15.1848 19.6306 14.5 19.013V19.25C14.5 19.6642 14.1642 20 13.75 20C13.3358 20 13 19.6642 13 19.25V3.75C13 3.33579 13.3358 3 13.75 3ZM14.5 15.5C14.5 17.3278 15.7805 18.5 17 18.5C18.2195 18.5 19.5 17.3278 19.5 15.5C19.5 13.6722 18.2195 12.5 17 12.5C15.7805 12.5 14.5 13.6722 14.5 15.5ZM7.50005 10.5014L7.78725 10.5113C9.74783 10.6088 10.9147 11.7373 10.9955 13.5555L11 13.7604V19.2604C11 19.6401 10.7178 19.9539 10.3518 20.0035L10.25 20.0104C9.8703 20.0104 9.55651 19.7282 9.50685 19.3621L9.5 19.2604L9.49865 19.156C8.51108 19.7214 7.59755 20.0104 6.75 20.0104C4.91158 20.0104 3.5 18.7159 3.5 16.7604C3.5 15.036 4.68843 13.7549 6.6597 13.5158C7.592 13.4028 8.53953 13.4736 9.49853 13.7255C9.4887 12.6184 8.94255 12.0706 7.71275 12.0095C6.75051 11.9616 6.07429 12.0967 5.67825 12.3744C5.33911 12.6123 4.87139 12.5301 4.63357 12.191C4.39576 11.8518 4.47789 11.3841 4.81703 11.1463C5.47484 10.685 6.37072 10.4807 7.50005 10.5014ZM9.499 15.3241L9.19613 15.2338C8.38875 15.0117 7.60483 14.9486 6.8403 15.0413C5.60791 15.1908 5 15.8461 5 16.7967C5 17.8934 5.7124 18.5467 6.75 18.5467C7.43032 18.5467 8.26848 18.2324 9.25129 17.583L9.499 17.4141V15.3241Z" 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_case_lowercase_24_regular.svg";Details
| Name | Text Case Lowercase |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_text_case_lowercase_24_regular.svg |
| Filled file | ic_fluent_text_case_lowercase_24_filled.svg |
| React components | TextCaseLowercase24Regular, TextCaseLowercase24Filled |
| License | MIT (© Microsoft Corporation) |