Fluent Icons

Hard Drive icon

Used to represent a hard drive for computers. Collection contains Storage as well. The Hard Drive 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

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

Hard Drive icon in React

npm install @fluentui/react-icons

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

export function Example() {
  return <HardDrive24Regular aria-label="Hard Drive" />;
}

Hard Drive icon in SVG

npm install @fluentui/svg-icons

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

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

Hard Drive icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Hard Drive icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.hard_drive_24_regular)

Hard Drive 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="&#xF0306;" FontSize="24" />

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

Hard Drive 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_hard_drive_24_regular"></i>

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

Hard Drive icon in Android

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

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

// Kotlin
R.drawable.ic_fluent_hard_drive_24_regular

Hard Drive icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .hardDrive24Regular)

Hard Drive 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 Hard Drive 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 { HardDrive24Regular, HardDrive24Filled } from "@fluentui/react-icons";

export function Example() {
  return <HardDrive24Regular aria-label="Hard Drive" />;
}

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_hard_drive_24_regular.svg" width="24" height="24" alt="Hard Drive">

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="M5.41521 5.26999C5.791 4.49336 6.57779 4 7.44057 4H16.5594C17.4222 4 18.209 4.49336 18.5848 5.26999L21.6755 11.6575C21.8891 12.0988 22 12.5828 22 13.0731V16.75C22 17.9926 20.9926 19 19.75 19H4.25C3.00736 19 2 17.9926 2 16.75V13.0731C2 12.5828 2.11093 12.0988 2.32448 11.6575L5.41521 5.26999ZM17.2346 5.92333C17.1093 5.66445 16.847 5.5 16.5594 5.5H7.44057C7.15297 5.5 6.89071 5.66445 6.76545 5.92333L4.30899 11H19.691L17.2346 5.92333ZM3.5 13.25V16.75C3.5 17.1642 3.83579 17.5 4.25 17.5H19.75C20.1642 17.5 20.5 17.1642 20.5 16.75V13.25C20.5 12.8358 20.1642 12.5 19.75 12.5H4.25C3.83579 12.5 3.5 12.8358 3.5 13.25ZM18 16C18.5523 16 19 15.5523 19 15C19 14.4477 18.5523 14 18 14C17.4477 14 17 14.4477 17 15C17 15.5523 17.4477 16 18 16Z" fill="currentColor"/></svg>

Details

NameHard Drive
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px, 28 px, 32 px, 48 px
Regular (outlined) fileic_fluent_hard_drive_24_regular.svg
Filled fileic_fluent_hard_drive_24_filled.svg
React (Regular)HardDrive16Regular, HardDrive20Regular, HardDrive24Regular, HardDrive28Regular, HardDrive32Regular, HardDrive48Regular
React (Filled)HardDrive16Filled, HardDrive20Filled, HardDrive24Filled, HardDrive28Filled, HardDrive32Filled, HardDrive48Filled
LicenseMIT (© Microsoft Corporation)

Keywords

memorystoragephysicaldevicesave

Related icons

Hard Drive CallSIMDrive TrainMap DriveMemoryRAMUSB PlugUSB StickCloudCloud AddCloud ArchiveCloud Arrow Down