Fluent Icons

Highlight icon

Used to highlight content in edit scenarios. The Highlight icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 3 sizes from 16 to 24 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

SVG

Filled

SVG
Xceed Toolkit Plus for WPF logoXceed Toolkit Plus for WPFSponsorUpgrade Your WPF UI with Xceed Toolkit Plus

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_highlight_24_regular.svg

Highlight icon in React

npm install @fluentui/react-icons

import { Highlight24Regular } from "@fluentui/react-icons";

export function Example() {
  return <Highlight24Regular aria-label="Highlight" />;
}

Highlight icon in SVG

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/highlight_24_regular.svg";

<!-- or load it from a CDN -->
<img src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.341/icons/highlight_24_regular.svg" width="24" height="24" alt="Highlight">

Highlight icon in Blazor

Microsoft's Fluent UI Blazor icons package:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

<FluentIcon Value="@(new Icons.Regular.Size24.Highlight())" />

Highlight icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.highlight_24_regular)

Highlight icon in WinUI / WPF

Add FluentSystemIcons-Regular.ttf from Microsoft's repository to your app, then use the glyph:

<!-- WinUI 3 (font in Assets/Fonts) -->
<FontIcon FontFamily="ms-appx:///Assets/Fonts/FluentSystemIcons-Regular.ttf#FluentSystemIcons-Regular" Glyph="&#xF47D;" FontSize="24" />

<!-- WPF (font in Fonts/, Build Action: Resource) -->
<TextBlock FontFamily="pack://application:,,,/Fonts/#FluentSystemIcons-Regular" Text="&#xF47D;" FontSize="24" />

Highlight icon in Icon font

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@9cf8af0f95a555918a60b8147a2f33a6a1248442/fonts/FluentSystemIcons-Regular.css">

<i class="icon-ic_fluent_highlight_24_regular"></i>

/* or use the code point in your own CSS */
.icon::before {
  font-family: "FluentSystemIcons-Regular";
  content: "\f47d";
  font-size: 24px;
}

Highlight icon in Android

// build.gradle
implementation("com.microsoft.design:fluent-system-icons:1.1.341@aar")

<!-- layout XML -->
<ImageView android:src="@drawable/ic_fluent_highlight_24_regular" />

// Kotlin
R.drawable.ic_fluent_highlight_24_regular

Highlight icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .highlight24Regular)

Highlight icon in Power Apps

Paste into an Image control's Image property. The Copy button copies the full formula with this icon's SVG.

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>…</svg>")

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" />;
}

Coding agents can look up this component through the Fluent Icons MCP server.

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>

Details

NameHighlight
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px
Regular (outlined) fileic_fluent_highlight_24_regular.svg
Filled fileic_fluent_highlight_24_filled.svg
React (Regular)Highlight16Regular, Highlight20Regular, Highlight24Regular
React (Filled)Highlight16Filled, Highlight20Filled, Highlight24Filled
LicenseMIT (© Microsoft Corporation)

Keywords

createeditdrawsave

Related icons

Highlight AccentHighlight LinkCircle HighlightCrop SparkleInk StrokeInk Stroke Arrow DownInk Stroke Arrow Up DownInking ToolInking Tool AccentLineLine DashesLine Horizontal 1 Dash Dot Dash