Virtual Network icon

Use the Virtual Network 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 { VirtualNetwork24Regular, VirtualNetwork24Filled } from "@fluentui/react-icons";

export function Example() {
  return <VirtualNetwork24Regular aria-label="Virtual Network" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_virtual_network_24_regular.svg" width="24" height="24" alt="Virtual Network">

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="M4.67087 7.27342C4.93414 6.95375 5.4068 6.90775 5.72654 7.17088C6.04617 7.43415 6.0922 7.90683 5.82908 8.22655L2.72068 12L5.82908 15.7735C6.09216 16.0932 6.0462 16.5659 5.72654 16.8291C5.40682 17.0922 4.93414 17.0462 4.67087 16.7266L1.17087 12.4766C0.943034 12.1997 0.943054 11.8003 1.17087 11.5234L4.67087 7.27342ZM18.2734 7.17088C18.5932 6.90775 19.0658 6.95375 19.3291 7.27342L22.8291 11.5234C23.0569 11.8003 23.0569 12.1997 22.8291 12.4766L19.3291 16.7266C19.0658 17.0462 18.5932 17.0922 18.2734 16.8291C17.9538 16.5659 17.9078 16.0932 18.1709 15.7735L21.2793 12L18.1709 8.22655C17.9078 7.90682 17.9538 7.43415 18.2734 7.17088ZM7.49998 10.75C8.19033 10.75 8.74998 11.3096 8.74998 12C8.74994 12.6903 8.19031 13.25 7.49998 13.25C6.80965 13.25 6.25002 12.6903 6.24998 12C6.24998 11.3096 6.80962 10.75 7.49998 10.75ZM12 10.75C12.6903 10.75 13.25 11.3096 13.25 12C13.25 12.6903 12.6903 13.25 12 13.25C11.3097 13.25 10.75 12.6903 10.75 12C10.75 11.3096 11.3096 10.75 12 10.75ZM16.5 10.75C17.1903 10.75 17.75 11.3096 17.75 12C17.75 12.6903 17.1903 13.25 16.5 13.25C15.8097 13.25 15.25 12.6903 15.25 12C15.25 11.3096 15.8096 10.75 16.5 10.75Z" 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/virtual_network_24_regular.svg";

Details

Keywords

connectarrownetwork