---
title: "Network switch animated icon"
description: "Network switch animated icon (Infrastructure & devices). The network switch forwards a packet from one port to another. Light: a data packet drops onto the switch above the first port and fades as it lands, the port lights flash across the row in turn, and the packet rises out above the last port and fades. Strong: two transfers, one each way: a packet comes in over the first port and leaves over the last, then a second comes in over the middle port, flashes back across and leaves over the first, travelling further. The case never moves."
canonical: https://generativeicons.com/icons/network-switch/
---

# Network switch animated icon

The network switch forwards a packet from one port to another. Light: a data packet drops onto the switch above the first port and fades as it lands, the port lights flash across the row in turn, and the packet rises out above the last port and fades. Strong: two transfers, one each way: a packet comes in over the first port and leaves over the last, then a second comes in over the middle port, flashes back across and leaves over the first, travelling further. The case never moves.

- Id: `network-switch`
- Category: Infrastructure & devices
- Search terms: network hub, hub, ethernet switch, lan switch, managed switch, ports, port lights, patch panel, packet forwarding, gigabit, rack switch
- One action, back to rest
- Styles: outline, solid, duotone; outline weights 1.5, 2, 2.5 (any from 1 to 3); motion light or strong
- File: https://generativeicons.com/assets/network-switch.lottie (dotLottie, 5801 bytes, sha256 c16a15a5376c6e6372873a5a964f27a4e5b361982cb888aa13d43a7121835b36)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add network-switch
```

## React

```tsx
// npm install @lottiefiles/generative-icons-react
'use client';
import { AnimatedIcon } from '@lottiefiles/generative-icons-react';
import icon, { src } from './generative-icons/network-switch.mjs';

export function NetworkSwitchIcon() {
  return <AnimatedIcon icon={icon} src={src} size={32}
    color="#ffffff" variant="outline" weight={2}
    motion="light" theme="dark" />;
}
```

## JavaScript

```js
import { createIcon } from '@lottiefiles/generative-icons-runtime';
import icon, { src } from './generative-icons/network-switch.mjs';

const handle = await createIcon(canvas, {
  icon, src,
  color: '#ffffff', style: 'outline', weight: 2,
  motion: 'light', theme: 'dark'
});
button.addEventListener('click', () => handle.play());
// On removal: handle.destroy();
```

More: https://generativeicons.com/icons/network-switch/ · https://generativeicons.com/api/icons/network-switch