Text Case Uppercase 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 Uppercase 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 Uppercase 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 { TextCaseUppercase24Regular, TextCaseUppercase24Filled } from "@fluentui/react-icons";
export function Example() {
return <TextCaseUppercase24Regular aria-label="Text Case Uppercase" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_text_case_uppercase_24_regular.svg" width="24" height="24" alt="Text Case Uppercase"> 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="M7.70702 3.49919C7.60214 3.20362 7.32443 3.00452 7.01083 3.00008C6.69724 2.99563 6.41399 3.18678 6.30078 3.47925L0.300776 18.9793C0.151247 19.3655 0.343174 19.7999 0.729456 19.9494C1.11574 20.099 1.5501 19.907 1.69963 19.5207L3.25605 15.5L10.3737 15.5L11.7934 19.5008C11.9319 19.8912 12.3606 20.0953 12.751 19.9568C13.1414 19.8183 13.3455 19.3896 13.207 18.9992L7.70702 3.49919ZM3.83669 14L6.96962 5.90659L9.84148 14L3.83669 14ZM14.75 3.25C14.3358 3.25 14 3.58579 14 4V19.25C14 19.6642 14.3358 20 14.75 20H18.875C21.4293 20 23.5 17.9293 23.5 15.375C23.5 13.5396 22.4309 11.9539 20.8814 11.2067C21.8706 10.3812 22.5 9.13911 22.5 7.75C22.5 5.26472 20.4853 3.25 18 3.25H14.75ZM21 7.75C21 9.40685 19.6569 10.75 18 10.75H15.5V4.75H18C19.6569 4.75 21 6.09315 21 7.75ZM18.875 18.5H15.5V12.25H18.875C20.6009 12.25 22 13.6491 22 15.375C22 17.1009 20.6009 18.5 18.875 18.5Z" 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_uppercase_24_regular.svg";Details
| Name | Text Case Uppercase |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_text_case_uppercase_24_regular.svg |
| Filled file | ic_fluent_text_case_uppercase_24_filled.svg |
| React components | TextCaseUppercase24Regular, TextCaseUppercase24Filled |
| License | MIT (© Microsoft Corporation) |