Live icon · Battery & signal · 20 styles · free

Network type live icon

The mobile network type you choose, such as 5G, LTE or 4G+, set in a rounded chip. Set it here, then download it or paste it anywhere.

Showing: “5G”

Use it in code

Try an example

Set what it shows

Style Line clean outlines

Colour Style colours

On this page

Network type in all 20 styles

Same values, 20 personalities. Pick one to use it above.

For developersOne element or component with your settings: HTML, React or Vue

Install it with npm i @withicons/dynamic, or copy the HTML tab as is. The code follows everything you set above: values, style, colours and size.

48 px
HTML: any website
<script src="https://cdn.jsdelivr.net/npm/@withicons/dynamic@0.2.1/dist/cdn/lite.js"></script>

<with-live-icon name="cellular-tech" tech="5G" chip size="48"></with-live-icon>
React
import { LiveIcon } from '@withicons/dynamic/react'

export function Example() {
  return <LiveIcon name="cellular-tech" tech="5G" chip size={48} />
}
Vue
<script setup>
import { LiveIcon } from '@withicons/dynamic/vue'
</script>

<template>
  <LiveIcon name="cellular-tech" tech="5G" :chip="true" :size="48" />
</template>

What you can change

SettingWhat you can setDefaultAttribute
Network (up to 4 characters)TextUp to 4 characters: A-Z, 0-9 and % ° : - + / . , ! ? $ € £ ₹ # & * '5Gtech
Set it in a chipOn / offon or offonchip

Also called network type mobile data type cell tech 5g badge lte badge network badge data badge

Questions

How do I change the network on the network type icon?

Use the controls next to the preview. Network and Set it in a chip can all be changed, the icon redraws as you go, and the download uses exactly what you see.

Is the network type icon free?

Yes. It is free for personal and commercial use under the MIT license, in all 20 styles. No sign-up, no credit needed.

Can I use it in PowerPoint, Google Slides or Canva?

Yes. Download a PNG (see-through background), an SVG or a ready PowerPoint slide, then drag it into your slide or design. SVG stays sharp at any size.

How do I add it to a website?

Add the @withicons/dynamic script and write <with-live-icon name="cellular-tech"> with your values as attributes. React and Vue get a LiveIcon component.

Network type studio

Outline colour