Walkie Talkie icon

Used to represent short wave communication devices. The Walkie Talkie icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 3 sizes from 20 to 28 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_walkie_talkie_24_regular.svg

Walkie Talkie icon in React

npm install @fluentui/react-icons

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

export function Example() {
  return <WalkieTalkie24Regular aria-label="Walkie Talkie" />;
}

Walkie Talkie icon in SVG

npm install @fluentui/svg-icons

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

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

Walkie Talkie icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Walkie Talkie icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.walkie_talkie_24_regular)

Walkie Talkie 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="&#xF865;" FontSize="24" />

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

Walkie Talkie 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_walkie_talkie_24_regular"></i>

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

Walkie Talkie icon in Android

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

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

// Kotlin
R.drawable.ic_fluent_walkie_talkie_24_regular

Walkie Talkie icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .walkieTalkie24Regular)

Walkie Talkie 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 Walkie Talkie 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 { WalkieTalkie24Regular, WalkieTalkie24Filled } from "@fluentui/react-icons";

export function Example() {
  return <WalkieTalkie24Regular aria-label="Walkie Talkie" />;
}

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_walkie_talkie_24_regular.svg" width="24" height="24" alt="Walkie Talkie">

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="M10.25 14C9.83579 14 9.5 14.3358 9.5 14.75C9.5 15.1642 9.83579 15.5 10.25 15.5H13.75C14.1642 15.5 14.5 15.1642 14.5 14.75C14.5 14.3358 14.1642 14 13.75 14H10.25ZM8.75 6C8.33579 6 8 6.33579 8 6.75V11.2506C8 11.6648 8.33579 12.0006 8.75 12.0006H15.25C15.6642 12.0006 16 11.6648 16 11.2506V6.75C16 6.33579 15.6642 6 15.25 6H8.75ZM9.5 10.5006V7.5H14.5V10.5006H9.5ZM8.75 1C9.16421 1 9.5 1.33579 9.5 1.75V3H16.75C17.9926 3 19 4.00736 19 5.25V14C19 14.1885 18.929 14.3702 18.8011 14.5087L17.5 15.9182V19.75C17.5 20.9926 16.4926 22 15.25 22H8.75109C7.50845 22 6.50109 20.9926 6.50109 19.75V15.9184L5.19908 14.5089C5.07108 14.3703 5 14.1886 5 14V5.25C5 4.00736 6.00736 3 7.25 3H8V1.75C8 1.33579 8.33579 1 8.75 1ZM6.5 5.25V13.7066L7.80201 15.1161C7.93001 15.2547 8.00109 15.4364 8.00109 15.625V19.75C8.00109 20.1642 8.33688 20.5 8.75109 20.5H15.25C15.6642 20.5 16 20.1642 16 19.75V15.625C16 15.4365 16.071 15.2548 16.1989 15.1163L17.5 13.7068V5.25C17.5 4.83579 17.1642 4.5 16.75 4.5H7.25C6.83579 4.5 6.5 4.83579 6.5 5.25Z" fill="currentColor"/></svg>

Details

NameWalkie Talkie
StylesRegular (outlined), Filled
Sizes20 px, 24 px, 28 px
Regular (outlined) fileic_fluent_walkie_talkie_24_regular.svg
Filled fileic_fluent_walkie_talkie_24_filled.svg
React (Regular)WalkieTalkie20Regular, WalkieTalkie24Regular, WalkieTalkie28Regular
React (Filled)WalkieTalkie20Filled, WalkieTalkie24Filled, WalkieTalkie28Filled
LicenseMIT (© Microsoft Corporation)

Keywords

device

Related icons