Hard Drive icon

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

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>

Use it from the SVG package

Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:

npm install @fluentui/svg-icons

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

Details

Keywords

memorystoragehardwarephysicaldevicesave