Eraser Medium icon
Used in erasing content scenarios. Contains size modifiers. The Eraser Medium 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 Eraser Medium 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 { EraserMedium24Regular, EraserMedium24Filled } from "@fluentui/react-icons";
export function Example() {
return <EraserMedium24Regular aria-label="Eraser Medium" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_eraser_medium_24_regular.svg" width="24" height="24" alt="Eraser Medium"> 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.8408 2.66117C14.9677 1.77057 13.5367 1.76012 12.6507 2.63787L3.05225 12.1464C2.16084 13.0295 2.16399 14.4711 3.05923 15.3502L8.15829 20.3577C9.04247 21.226 10.4623 21.2159 11.334 20.3351L11.5488 20.1181C11.3205 19.6 11.1578 19.0464 11.0714 18.468L10.2679 19.2799C9.97731 19.5735 9.50402 19.5769 9.20929 19.2875L4.11024 14.28C3.81182 13.9869 3.81078 13.5064 4.10791 13.2121L5.6369 11.6974L11.0135 17.074C11.0531 16.4606 11.1778 15.8704 11.3759 15.3151L6.70254 10.6417L13.7063 3.70351C14.0017 3.41093 14.4787 3.41441 14.7697 3.71128L19.6798 8.71954C19.9666 9.01216 19.9655 9.48088 19.6773 9.77216L18.4012 11.0615C18.9809 11.142 19.5361 11.2988 20.0563 11.5216L20.7434 10.8273C21.6082 9.95347 21.6115 8.54731 20.7509 7.66943L15.8408 2.66117Z" fill="currentColor"/>
<path d="M19.2889 12.2971C21.4481 13.0395 22.9998 15.0883 22.9998 17.4995C22.9998 20.5371 20.5373 22.9995 17.4998 22.9995C15.1087 22.9995 13.074 21.4737 12.3162 19.3426C12.1113 18.7665 11.9998 18.146 11.9998 17.4995C11.9998 17.0212 12.0608 16.5572 12.1756 16.1147C12.7874 13.7558 14.9255 12.0118 17.4729 11.9996" fill="currentColor"/>
<path d="M17.4998 11.9995C18.1261 11.9995 18.728 12.1042 19.2889 12.2971Z" fill="currentColor"/>
<path d="M17.4998 11.9995C17.4908 11.9995 17.4818 11.9996 17.4729 11.9996Z" 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/eraser_medium_24_regular.svg";Details
| Name | Eraser Medium |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_eraser_medium_24_regular.svg |
| Filled file | ic_fluent_eraser_medium_24_filled.svg |
| React components | EraserMedium24Regular, EraserMedium24Filled |
| License | MIT (© Microsoft Corporation) |