Fluent Icons

Data Usage icon

The Data Usage icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 6 sizes from 16 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
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_data_usage_24_regular.svg

Data Usage icon in React

npm install @fluentui/react-icons

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

export function Example() {
  return <DataUsage24Regular aria-label="Data Usage" />;
}

Data Usage icon in SVG

npm install @fluentui/svg-icons

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

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

Data Usage icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Data Usage icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.data_usage_24_regular)

Data Usage 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="&#xF349;" FontSize="24" />

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

Data Usage 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_data_usage_24_regular"></i>

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

Data Usage icon in Android

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

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

// Kotlin
R.drawable.ic_fluent_data_usage_24_regular

Data Usage icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .dataUsage24Regular)

Data Usage 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 Data Usage 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 { DataUsage24Regular, DataUsage24Filled } from "@fluentui/react-icons";

export function Example() {
  return <DataUsage24Regular aria-label="Data Usage" />;
}

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_data_usage_24_regular.svg" width="24" height="24" alt="Data Usage">

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="M18.25 2.99609C19.7688 2.99609 21 4.22731 21 5.74609V18.2461C21 19.7649 19.7688 20.9961 18.25 20.9961H5.75C4.23122 20.9961 3 19.7649 3 18.2461V5.74609C3 4.22731 4.23122 2.99609 5.75 2.99609H18.25ZM18.25 4.49609H5.75C5.05964 4.49609 4.5 5.05574 4.5 5.74609V18.2461C4.5 18.9364 5.05964 19.4961 5.75 19.4961H18.25C18.9404 19.4961 19.5 18.9364 19.5 18.2461V5.74609C19.5 5.05574 18.9404 4.49609 18.25 4.49609ZM7.75 8.9994C8.1297 8.9994 8.44349 9.28034 8.49315 9.64485L8.5 9.74618V16.2526C8.5 16.6651 8.16421 16.9994 7.75 16.9994C7.3703 16.9994 7.05651 16.7185 7.00685 16.354L7 16.2526V9.74618C7 9.33374 7.33579 8.9994 7.75 8.9994ZM16.25 6.9994C16.6297 6.9994 16.9435 7.27381 16.9932 7.62983L17 7.72881V16.27C17 16.6728 16.6642 16.9994 16.25 16.9994C15.8703 16.9994 15.5565 16.725 15.5068 16.369L15.5 16.27V7.72881C15.5 7.32597 15.8358 6.9994 16.25 6.9994ZM11.9751 11.9961C12.3458 11.9925 12.6549 12.2628 12.707 12.6168L12.7146 12.7153L12.75 16.2626C12.754 16.6637 12.4293 16.9921 12.0249 16.9962C11.6542 16.9997 11.3451 16.7295 11.293 16.3755L11.2854 16.277L11.25 12.7296C11.246 12.3285 11.5707 12.0001 11.9751 11.9961Z" fill="currentColor"/></svg>

Details

NameData Usage
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px, 28 px, 32 px, 48 px
Regular (outlined) fileic_fluent_data_usage_24_regular.svg
Filled fileic_fluent_data_usage_24_filled.svg
React (Regular)DataUsage16Regular, DataUsage20Regular, DataUsage24Regular, DataUsage28Regular, DataUsage32Regular, DataUsage48Regular
React (Filled)DataUsage16Filled, DataUsage20Filled, DataUsage24Filled, DataUsage28Filled, DataUsage32Filled, DataUsage48Filled
LicenseMIT (© Microsoft Corporation)

Keywords

data vizvisualizationchartmaptrending

Related icons

Data Usage CheckmarkData Usage EditData Usage ToolboxData AreaData Bar HorizontalData Bar VerticalData Bar Vertical AddData Bar Vertical StarData FunnelData HistogramData LineData Pie