Text Field icon

Use the Text Field 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 { TextField24Regular, TextField24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TextField24Regular aria-label="Text Field" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_text_field_24_regular.svg" width="24" height="24" alt="Text Field">

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="M15.5 7.5H12.75V16.5H13.25C13.6642 16.5 14 16.8358 14 17.25C14 17.6642 13.6642 18 13.25 18H10.75C10.3358 18 10 17.6642 10 17.25C10 16.8358 10.3358 16.5 10.75 16.5H11.25V7.5H8.5V8.2501C8.5 8.66432 8.16421 9.0001 7.75 9.0001C7.33579 9.0001 7 8.66432 7 8.2501V6.75C7 6.33579 7.33579 6 7.75 6H16.25C16.6642 6 17 6.33579 17 6.75V8.2501C17 8.66432 16.6642 9.0001 16.25 9.0001C15.8358 9.0001 15.5 8.66432 15.5 8.2501V7.5ZM5.75 3C3.67893 3 2 4.67893 2 6.75V17.25C2 19.3211 3.67893 21 5.75 21H18.25C20.3211 21 22 19.3211 22 17.25V6.75C22 4.67893 20.3211 3 18.25 3H5.75ZM3.5 6.75C3.5 5.50736 4.50736 4.5 5.75 4.5H18.25C19.4926 4.5 20.5 5.50736 20.5 6.75V17.25C20.5 18.4926 19.4926 19.5 18.25 19.5H5.75C4.50736 19.5 3.5 18.4926 3.5 17.25V6.75Z" 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_field_24_regular.svg";

Details

Keywords

typetexttypographyeditcreateinputfieldformletter