Fluent Icons

Incognito icon

Used to represent a private browsing account. The Incognito icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 7 sizes from 12 to 48 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

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_incognito_24_regular.svg

Incognito icon in React

npm install @fluentui/react-icons

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

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

Incognito icon in SVG

npm install @fluentui/svg-icons

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

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

Incognito icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Incognito icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.incognito_24_regular)

Incognito 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="&#xF4A1;" FontSize="24" />

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

Incognito 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_incognito_24_regular"></i>

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

Incognito icon in Android

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

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

// Kotlin
R.drawable.ic_fluent_incognito_24_regular

Incognito icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .incognito24Regular)

Incognito 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 Incognito 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 { Incognito24Regular, Incognito24Filled } from "@fluentui/react-icons";

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

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_incognito_24_regular.svg" width="24" height="24" alt="Incognito">

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="M8.37867 4.5C7.88849 4.5 7.44355 4.7865 7.24071 5.23275L6.18271 7.56035C6.01131 7.93744 5.56667 8.10418 5.18958 7.93278C4.8125 7.76137 4.64576 7.31673 4.81716 6.93965L5.87516 4.61204C6.32141 3.63031 7.30028 3 8.37867 3H15.6214C16.6996 3 17.6784 3.63016 18.1247 4.61173L19.1827 6.93841C19.3541 7.31547 19.1874 7.76013 18.8104 7.93158C18.4333 8.10303 17.9886 7.93635 17.8172 7.55928L16.7593 5.2326C16.5564 4.78644 16.1115 4.5 15.6214 4.5H8.37867ZM6.49993 13.5C4.84308 13.5 3.49993 14.8431 3.49993 16.5C3.49993 18.1569 4.84308 19.5 6.49993 19.5C8.15679 19.5 9.49993 18.1569 9.49993 16.5C9.49993 14.8431 8.15679 13.5 6.49993 13.5ZM1.99993 16.5C1.99993 14.0147 4.01465 12 6.49993 12C8.81621 12 10.7237 13.75 10.9725 16H13.0274C13.2761 13.75 15.1837 12 17.4999 12C19.9852 12 21.9999 14.0147 21.9999 16.5C21.9999 18.9853 19.9852 21 17.4999 21C15.3583 21 13.5662 19.504 13.1114 17.5H10.8884C10.4337 19.504 8.64152 21 6.49993 21C4.01465 21 1.99993 18.9853 1.99993 16.5ZM17.4999 13.5C15.8431 13.5 14.4999 14.8431 14.4999 16.5C14.4999 18.1569 15.8431 19.5 17.4999 19.5C19.1568 19.5 20.4999 18.1569 20.4999 16.5C20.4999 14.8431 19.1568 13.5 17.4999 13.5ZM2.93384 10.973C8.06314 9.67567 15.9367 9.67564 21.066 10.973C21.4676 11.0746 21.8755 10.8314 21.977 10.4299C22.0786 10.0283 21.8354 9.62041 21.4338 9.51884C16.0631 8.16037 7.93673 8.16041 2.56603 9.51884C2.16446 9.62041 1.92126 10.0283 2.02283 10.4298C2.1244 10.8314 2.53228 11.0746 2.93384 10.973Z" fill="currentColor"/></svg>

Details

NameIncognito
StylesRegular (outlined), Filled
Sizes12 px, 16 px, 20 px, 24 px, 28 px, 32 px, 48 px
Regular (outlined) fileic_fluent_incognito_24_regular.svg
Filled fileic_fluent_incognito_24_filled.svg
React (Regular)Incognito12Regular, Incognito16Regular, Incognito20Regular, Incognito24Regular, Incognito28Regular, Incognito32Regular, Incognito48Regular
React (Filled)Incognito12Filled, Incognito16Filled, Incognito20Filled, Incognito24Filled, Incognito28Filled, Incognito32Filled, Incognito48Filled
LicenseMIT (© Microsoft Corporation)

Keywords

browserperson

Related icons

InPrivate AccountAccessibilityAccessibility CheckmarkAccessibility ErrorAccessibility MoreAccessibility Question MarkBriefcase PersonChart PersonCollectionsCollections AddContact CardContact Card Generic