Cloud Bidirectional icon
Used in all stored data scenarios. The Cloud Bidirectional icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Cloud Bidirectional 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 { CloudBidirectional24Regular, CloudBidirectional24Filled } from "@fluentui/react-icons";
export function Example() {
return <CloudBidirectional24Regular aria-label="Cloud Bidirectional" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_cloud_bidirectional_24_regular.svg" width="24" height="24" alt="Cloud Bidirectional"> 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 3.5C9.58676 3.5 7.61684 5.39994 7.50502 7.78512C7.48627 8.18524 7.15641 8.5 6.75585 8.5H6.5C4.84315 8.5 3.5 9.84315 3.5 11.5C3.5 13.1569 4.84315 14.5 6.5 14.5H10V16H6.5C4.01472 16 2 13.9853 2 11.5C2 9.15641 3.79155 7.23125 6.07981 7.01936C6.54808 4.17188 9.02022 2 12 2C14.9798 2 17.4519 4.17189 17.9202 7.01936C20.2085 7.23125 22 9.15641 22 11.5C22 13.9853 19.9853 16 17.5 16H13.5V14.5H17.5C19.1569 14.5 20.5 13.1569 20.5 11.5C20.5 9.84315 19.1569 8.5 17.5 8.5H17.2442C16.8436 8.5 16.5137 8.18524 16.495 7.78512C16.3832 5.39994 14.4132 3.5 12 3.5ZM14.7803 11.7803C14.4874 12.0732 14.0126 12.0732 13.7197 11.7803L12.5 10.5607V19.4393L13.7197 18.2197C14.0126 17.9268 14.4874 17.9268 14.7803 18.2197C15.0732 18.5126 15.0732 18.9874 14.7803 19.2803L12.2803 21.7803C11.9874 22.0732 11.5126 22.0732 11.2197 21.7803L8.71967 19.2803C8.42678 18.9874 8.42678 18.5126 8.71967 18.2197C9.01256 17.9268 9.48744 17.9268 9.78033 18.2197L11 19.4393V10.5607L9.78033 11.7803C9.48744 12.0732 9.01256 12.0732 8.71967 11.7803C8.42678 11.4874 8.42678 11.0126 8.71967 10.7197L11.2197 8.21967C11.5126 7.92678 11.9874 7.92678 12.2803 8.21967L14.7803 10.7197C15.0732 11.0126 15.0732 11.4874 14.7803 11.7803Z" 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_bidirectional_24_regular.svg";Details
| Name | Cloud Bidirectional |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_cloud_bidirectional_24_regular.svg |
| Filled file | ic_fluent_cloud_bidirectional_24_filled.svg |
| React components | CloudBidirectional24Regular, CloudBidirectional24Filled |
| License | MIT (© Microsoft Corporation) |