radio icon
radio from IconPark by ByteDance · Color · Hardware · Apache-2.0 Free for personal and commercial use.
- Name
- radio
- Set
- IconPark
- Style
- Color
- Category
- Hardware
- Viewbox
- 48×48
- License
- Apache 2.0
The same icon in other sets
radioAkar IconsradioBoxIcons v2radioBoxIcons v2 SolidradioCarbonradioEmoji One (Colored)radio-fillEva IconsradioFont Awesome 6 SolidradioFont Awesome SolidradioFeather IconsradioFluent EmojiradioFluent Emoji FlatradioFluent Emoji High ContrastradioFirefox OS EmojiradioHeroIconsradioHuge IconsradioHumbleiconsradioIconPark OutlineradioIconPark SolidradioIconPark TwoToneradioIonIconsradioLucideradioMaterial SymbolsradioMaterial Symbols LightradioMaterial Design Icons
More hardware icons from IconPark
Use the radio icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none" stroke-width="4"><rect width="38" height="28" x="5" y="13" fill="#2F88FF" stroke="#000" rx="2"/><circle cx="18" cy="28" r="6" fill="#43CCF8" stroke="#fff"/><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" d="M30 24L36 24"/><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" d="M30 32L36 32"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M7 13L25 4"/></g></svg>
React
import type { SVGProps } from "react";
export function IconParkRadio(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none" strokeWidth="4"><rect width="38" height="28" x="5" y="13" fill="#2F88FF" stroke="#000" rx="2"/><circle cx="18" cy="28" r="6" fill="#43CCF8" stroke="#fff"/><path stroke="#fff" strokeLinecap="round" strokeLinejoin="round" d="M30 24L36 24"/><path stroke="#fff" strokeLinecap="round" strokeLinejoin="round" d="M30 32L36 32"/><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M7 13L25 4"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none" stroke-width="4"><rect width="38" height="28" x="5" y="13" fill="#2F88FF" stroke="#000" rx="2"/><circle cx="18" cy="28" r="6" fill="#43CCF8" stroke="#fff"/><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" d="M30 24L36 24"/><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" d="M30 32L36 32"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M7 13L25 4"/></g></svg> </template>
CSS
.icon-radio {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22none%22%20stroke-width%3D%224%22%3E%3Crect%20width%3D%2238%22%20height%3D%2228%22%20x%3D%225%22%20y%3D%2213%22%20fill%3D%22%232F88FF%22%20stroke%3D%22%23000%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2228%22%20r%3D%226%22%20fill%3D%22%2343CCF8%22%20stroke%3D%22%23fff%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M30%2024L36%2024%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M30%2032L36%2032%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M7%2013L25%204%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22none%22%20stroke-width%3D%224%22%3E%3Crect%20width%3D%2238%22%20height%3D%2228%22%20x%3D%225%22%20y%3D%2213%22%20fill%3D%22%232F88FF%22%20stroke%3D%22%23000%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2228%22%20r%3D%226%22%20fill%3D%22%2343CCF8%22%20stroke%3D%22%23fff%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M30%2024L36%2024%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M30%2032L36%2032%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M7%2013L25%204%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/icon-park/radio.svg?color=%231a73e8&size=48
