radio icon
radio from Carbon by IBM · Outline · Tools · Apache-2.0 Free for personal and commercial use.
- Name
- radio
- Set
- Carbon
- Style
- Outline
- Category
- Tools
- Viewbox
- 32×32
- License
- Apache 2.0
The same icon in other sets
radioAkar IconsradioBoxIcons v2radioBoxIcons v2 SolidradioEmoji One (Colored)radio-fillEva IconsradioFont Awesome 6 SolidradioFont Awesome SolidradioFeather IconsradioFluent EmojiradioFluent Emoji FlatradioFluent Emoji High ContrastradioFirefox OS EmojiradioHeroIconsradioHuge IconsradioHumbleiconsradioIconParkradioIconPark OutlineradioIconPark SolidradioIconPark TwoToneradioIonIconsradioLucideradioMaterial SymbolsradioMaterial Symbols LightradioMaterial Design Icons
More tools icons from Carbon
Use the radio icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M28 10h-4V2h-2v8h-9V8h-2v2H8V8H6v2H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V12a2 2 0 0 0-2-2M4 28V12h24v16Z"/><path fill="currentColor" d="M10 26a4 4 0 1 1 4-4a4 4 0 0 1-4 4m0-6a2 2 0 1 0 2 2a2 2 0 0 0-2-2m-3-6h6v2H7zm10 2h9v2h-9zm0 4h9v2h-9zm0 4h9v2h-9z"/></svg>
React
import type { SVGProps } from "react";
export function CarbonRadio(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M28 10h-4V2h-2v8h-9V8h-2v2H8V8H6v2H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V12a2 2 0 0 0-2-2M4 28V12h24v16Z"/><path fill="currentColor" d="M10 26a4 4 0 1 1 4-4a4 4 0 0 1-4 4m0-6a2 2 0 1 0 2 2a2 2 0 0 0-2-2m-3-6h6v2H7zm10 2h9v2h-9zm0 4h9v2h-9zm0 4h9v2h-9z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M28 10h-4V2h-2v8h-9V8h-2v2H8V8H6v2H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V12a2 2 0 0 0-2-2M4 28V12h24v16Z"/><path fill="currentColor" d="M10 26a4 4 0 1 1 4-4a4 4 0 0 1-4 4m0-6a2 2 0 1 0 2 2a2 2 0 0 0-2-2m-3-6h6v2H7zm10 2h9v2h-9zm0 4h9v2h-9zm0 4h9v2h-9z"/></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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M28%2010h-4V2h-2v8h-9V8h-2v2H8V8H6v2H4a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h24a2%202%200%200%200%202-2V12a2%202%200%200%200-2-2M4%2028V12h24v16Z%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M10%2026a4%204%200%201%201%204-4a4%204%200%200%201-4%204m0-6a2%202%200%201%200%202%202a2%202%200%200%200-2-2m-3-6h6v2H7zm10%202h9v2h-9zm0%204h9v2h-9zm0%204h9v2h-9z%22%2F%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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M28%2010h-4V2h-2v8h-9V8h-2v2H8V8H6v2H4a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h24a2%202%200%200%200%202-2V12a2%202%200%200%200-2-2M4%2028V12h24v16Z%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M10%2026a4%204%200%201%201%204-4a4%204%200%200%201-4%204m0-6a2%202%200%201%200%202%202a2%202%200%200%200-2-2m-3-6h6v2H7zm10%202h9v2h-9zm0%204h9v2h-9zm0%204h9v2h-9z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/carbon/radio.svg?color=%231a73e8&size=48
