Highlight icon
Used to highlight content in edit scenarios. The Highlight 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 Highlight 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 { Highlight24Regular, Highlight24Filled } from "@fluentui/react-icons";
export function Example() {
return <Highlight24Regular aria-label="Highlight" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_highlight_24_regular.svg" width="24" height="24" alt="Highlight"> 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="M20.2586 2.00391C20.6383 2.00425 20.9518 2.28669 21.0011 2.65281L21.0079 2.75458L21.0038 7.25229C21.0009 8.40861 20.1271 9.36025 19.0029 9.48624L19.0025 11.746C19.0025 12.9369 18.0773 13.9117 16.9065 13.9908L16.7525 13.996L16.501 13.9959L16.5018 16.7876C16.5018 17.6026 16.0617 18.3489 15.3601 18.7458L15.2058 18.8254L8.57108 21.9317C8.10485 22.1499 7.57412 21.8446 7.5096 21.3531L7.50307 21.2524L7.503 13.9959L7.25 13.996C6.05914 13.996 5.08436 13.0708 5.00519 11.9001L5 11.746L5.00044 9.48671C3.92882 9.36846 3.08392 8.49764 3.00589 7.4144L3 7.25039V2.75391C3 2.33969 3.33579 2.00391 3.75 2.00391C4.1297 2.00391 4.44349 2.28606 4.49315 2.65214L4.5 2.75391V7.25039C4.5 7.63009 4.78215 7.94388 5.14823 7.99355L5.25 8.00039L18.7513 8.00039C19.1316 7.99977 19.4461 7.71712 19.4967 7.35138L19.5038 7.24972L19.5079 2.75323C19.5083 2.33902 19.8444 2.00353 20.2586 2.00391ZM15.001 13.9959H9.003L9.00307 20.0731L14.5698 17.4669C14.8004 17.3589 14.9582 17.1427 14.994 16.8953L15.0018 16.7876L15.001 13.9959ZM17.502 9.49991H6.5V11.746C6.5 12.1257 6.78215 12.4395 7.14823 12.4892L7.25 12.496H16.7525C17.1322 12.496 17.446 12.2139 17.4956 11.8478L17.5025 11.746L17.502 9.49991Z" 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/highlight_24_regular.svg";Details
| Name | Highlight |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_highlight_24_regular.svg |
| Filled file | ic_fluent_highlight_24_filled.svg |
| React components | Highlight24Regular, Highlight24Filled |
| License | MIT (© Microsoft Corporation) |