Text More icon

Use the Text More 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 { TextMore24Regular, TextMore24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M9.75019 2C10.0512 2 10.3231 2.17997 10.4406 2.45709L17.4115 18.8884C16.9529 18.3451 16.2669 18 15.5002 18C15.4686 18 15.4372 18.0006 15.4059 18.0017L13.9203 14.5H5.58005L3.44063 19.5429C3.27886 19.9242 2.8386 20.1022 2.45728 19.9404C2.07596 19.7787 1.89799 19.3384 2.05976 18.9571L9.05976 2.45709C9.17732 2.17997 9.44917 2 9.75019 2ZM13.284 13L9.75019 4.67037L6.21641 13H13.284ZM12 20.5C12 21.3284 11.3284 22 10.5 22C9.67157 22 9 21.3284 9 20.5C9 19.6716 9.67157 19 10.5 19C11.3284 19 12 19.6716 12 20.5ZM15.5 22C16.3284 22 17 21.3284 17 20.5C17 19.6716 16.3284 19 15.5 19C14.6716 19 14 19.6716 14 20.5C14 21.3284 14.6716 22 15.5 22ZM20.5 22C21.3284 22 22 21.3284 22 20.5C22 19.6716 21.3284 19 20.5 19C19.6716 19 19 19.6716 19 20.5C19 21.3284 19.6716 22 20.5 22Z" 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_more_24_regular.svg";

Details

Keywords

typetexttypographyeditcreateoverflowletter