Storage icon

Use the Storage 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 { Storage24Regular, Storage24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_storage_24_regular.svg" width="24" height="24" alt="Storage">

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 7H19C20.5977 7 21.9037 8.24892 21.9949 9.82373L22 10V14C22 15.5977 20.7511 16.9037 19.1763 16.9949L19 17H5C3.40232 17 2.09634 15.7511 2.00509 14.1763L2 14V10C2 8.40232 3.24892 7.09634 4.82373 7.00509L5 7H19H5ZM19 8.5H5C4.17157 8.5 3.5 9.1716 3.5 10V14C3.5 14.8284 4.17157 15.5 5 15.5H19C19.8284 15.5 20.5 14.8284 20.5 14V10C20.5 9.1716 19.8284 8.5 19 8.5ZM18 10C18.5523 10 19 10.4477 19 11C19 11.5523 18.5523 12 18 12C17.4477 12 17 11.5523 17 11C17 10.4477 17.4477 10 18 10ZM14 10C14.5523 10 15 10.4477 15 11C15 11.5523 14.5523 12 14 12C13.4477 12 13 11.5523 13 11C13 10.4477 13.4477 10 14 10Z" 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/storage_24_regular.svg";

Details

Keywords

harddrivedevicedata