Cloud Archive icon

Use the Cloud Archive 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 { CloudArchive24Regular, CloudArchive24Filled } from "@fluentui/react-icons";

export function Example() {
  return <CloudArchive24Regular aria-label="Cloud Archive" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_cloud_archive_24_regular.svg" width="24" height="24" alt="Cloud Archive">

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="M12 5.5C9.58676 5.5 7.61684 7.39994 7.50502 9.78512C7.48627 10.1852 7.15641 10.5 6.75585 10.5H6.5C4.84315 10.5 3.5 11.8431 3.5 13.5C3.5 15.1569 4.84315 16.5 6.5 16.5H11.6771C11.7764 16.5877 11.8846 16.6657 12 16.7324V18H6.5C4.01472 18 2 15.9853 2 13.5C2 11.1564 3.79155 9.23125 6.07981 9.01936C6.54808 6.17188 9.02022 4 12 4C14.9798 4 17.4519 6.17189 17.9202 9.01936C19.6949 9.1837 21.1709 10.3786 21.7439 12H20.0987C19.5799 11.1033 18.6104 10.5 17.5 10.5H17.2442C16.8436 10.5 16.5137 10.1852 16.495 9.78512C16.3832 7.39994 14.4132 5.5 12 5.5ZM13 13C12.4477 13 12 13.4477 12 14V15C12 15.5523 12.4477 16 13 16H22C22.5523 16 23 15.5523 23 15V14C23 13.4477 22.5523 13 22 13H13ZM20 23C21.1046 23 22 22.1046 22 21V17H13V21C13 22.1046 13.8954 23 15 23H20ZM15.5 18.5C15.5 18.2239 15.7239 18 16 18H19C19.2761 18 19.5 18.2239 19.5 18.5C19.5 18.7761 19.2761 19 19 19H16C15.7239 19 15.5 18.7761 15.5 18.5Z" 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/cloud_archive_24_regular.svg";

Details

Keywords

storageuploaddownloadsavesyncbox