Clear Formatting icon

Use the Clear Formatting 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 { ClearFormatting24Regular, ClearFormatting24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ClearFormatting24Regular aria-label="Clear Formatting" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_clear_formatting_24_regular.svg" width="24" height="24" alt="Clear Formatting">

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="M17.5 12C20.5376 12 23 14.4624 23 17.5C23 20.5376 20.5376 23 17.5 23C14.4624 23 12 20.5376 12 17.5C12 14.4624 14.4624 12 17.5 12ZM11.3136 19.5004C11.4861 20.0342 11.7258 20.5378 12.0226 21.0012L2.75 21C2.33579 21 2 20.6642 2 20.25C2 19.8703 2.28215 19.5565 2.64823 19.5068L2.75 19.5L11.3136 19.5004ZM15.093 14.9663L15.0238 15.0241L14.9659 15.0934C14.8478 15.2639 14.8478 15.4915 14.9659 15.662L15.0238 15.7312L16.7934 17.5007L15.0264 19.2675L14.9685 19.3367C14.8504 19.5072 14.8504 19.7348 14.9685 19.9053L15.0264 19.9746L15.0956 20.0325C15.2661 20.1506 15.4937 20.1506 15.6642 20.0325L15.7335 19.9746L17.5004 18.2077L19.2694 19.9768L19.3386 20.0347C19.5092 20.1528 19.7367 20.1528 19.9073 20.0347L19.9765 19.9768L20.0344 19.9076C20.1525 19.7371 20.1525 19.5095 20.0344 19.339L19.9765 19.2697L18.2074 17.5007L19.9793 15.7313L20.0371 15.662C20.1552 15.4915 20.1552 15.2639 20.0371 15.0934L19.9793 15.0242L19.91 14.9663C19.7395 14.8482 19.5119 14.8482 19.3414 14.9663L19.2722 15.0242L17.5004 16.7937L15.7309 15.0241L15.6617 14.9663C15.5155 14.865 15.3274 14.8506 15.1693 14.9229L15.093 14.9663ZM15.75 3.5C16.1795 3.5 16.5139 3.85747 16.4997 4.274L16.4902 4.37104L16.2449 5.87104C16.178 6.27983 15.7924 6.55702 15.3837 6.49017C15.0089 6.42889 14.7448 6.09979 14.7549 5.7305L14.7645 5.62896L14.8674 5H11.007L9.001 16.5H9.75C10.1297 16.5 10.4435 16.7822 10.4932 17.1482L10.5 17.25C10.5 17.6297 10.2178 17.9435 9.85177 17.9932L9.75 18H6.75C6.33579 18 6 17.6642 6 17.25C6 16.8703 6.28215 16.5565 6.64823 16.5068L6.75 16.5H7.479L9.485 5H5.38506L5.23906 5.87362C5.17079 6.28217 4.78425 6.55802 4.3757 6.48974C4.0012 6.42716 3.7382 6.09714 3.74956 5.72788L3.75958 5.62638L4.01026 4.12638C4.06463 3.80103 4.32345 3.55394 4.64186 3.50778L4.75 3.5H15.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/clear_formatting_24_regular.svg";

Details

Keywords

texttedit