radio icon
radio from IonIcons by Ben Sperry · Regular · MIT Free for personal and commercial use.
- Name
- radio
- Set
- IonIcons
- Style
- Regular
- Viewbox
- 512×512
- License
- MIT
2 other variants in IonIcons
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 IconsradioHumbleiconsradioIconParkradioIconPark OutlineradioIconPark SolidradioIconPark TwoToneradioLucideradioMaterial SymbolsradioMaterial Symbols LightradioMaterial Design Icons
Related icons in IonIcons
Use the radio icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><circle cx="256" cy="256" r="36" fill="currentColor"/><path fill="currentColor" d="M190.24 341.77a22 22 0 0 1-16.46-7.38a118 118 0 0 1 0-156.76a22 22 0 1 1 32.87 29.24a74 74 0 0 0 0 98.29a22 22 0 0 1-16.43 36.61Zm131.52 0a22 22 0 0 1-16.43-36.61a74 74 0 0 0 0-98.29a22 22 0 1 1 32.87-29.24a118 118 0 0 1 0 156.76a22 22 0 0 1-16.44 7.38"/><path fill="currentColor" d="M139.29 392.72a21.92 21.92 0 0 1-16.08-7a190 190 0 0 1 0-259.49a22 22 0 1 1 32.13 30.06a146 146 0 0 0 0 199.38a22 22 0 0 1-16.06 37Zm233.42 0a22 22 0 0 1-16.06-37a146 146 0 0 0 0-199.38a22 22 0 1 1 32.13-30.06a190 190 0 0 1 0 259.49a21.92 21.92 0 0 1-16.07 6.95"/><path fill="currentColor" d="M429 438a22 22 0 0 1-16.39-36.67a218.34 218.34 0 0 0 0-290.66a22 22 0 0 1 32.78-29.34a262.34 262.34 0 0 1 0 349.34A22 22 0 0 1 429 438m-346 0a21.94 21.94 0 0 1-16.41-7.33a262.34 262.34 0 0 1 0-349.34a22 22 0 0 1 32.78 29.34a218.34 218.34 0 0 0 0 290.66A22 22 0 0 1 83 438"/></svg>
React
import type { SVGProps } from "react";
export function IonRadio(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><circle cx="256" cy="256" r="36" fill="currentColor"/><path fill="currentColor" d="M190.24 341.77a22 22 0 0 1-16.46-7.38a118 118 0 0 1 0-156.76a22 22 0 1 1 32.87 29.24a74 74 0 0 0 0 98.29a22 22 0 0 1-16.43 36.61Zm131.52 0a22 22 0 0 1-16.43-36.61a74 74 0 0 0 0-98.29a22 22 0 1 1 32.87-29.24a118 118 0 0 1 0 156.76a22 22 0 0 1-16.44 7.38"/><path fill="currentColor" d="M139.29 392.72a21.92 21.92 0 0 1-16.08-7a190 190 0 0 1 0-259.49a22 22 0 1 1 32.13 30.06a146 146 0 0 0 0 199.38a22 22 0 0 1-16.06 37Zm233.42 0a22 22 0 0 1-16.06-37a146 146 0 0 0 0-199.38a22 22 0 1 1 32.13-30.06a190 190 0 0 1 0 259.49a21.92 21.92 0 0 1-16.07 6.95"/><path fill="currentColor" d="M429 438a22 22 0 0 1-16.39-36.67a218.34 218.34 0 0 0 0-290.66a22 22 0 0 1 32.78-29.34a262.34 262.34 0 0 1 0 349.34A22 22 0 0 1 429 438m-346 0a21.94 21.94 0 0 1-16.41-7.33a262.34 262.34 0 0 1 0-349.34a22 22 0 0 1 32.78 29.34a218.34 218.34 0 0 0 0 290.66A22 22 0 0 1 83 438"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><circle cx="256" cy="256" r="36" fill="currentColor"/><path fill="currentColor" d="M190.24 341.77a22 22 0 0 1-16.46-7.38a118 118 0 0 1 0-156.76a22 22 0 1 1 32.87 29.24a74 74 0 0 0 0 98.29a22 22 0 0 1-16.43 36.61Zm131.52 0a22 22 0 0 1-16.43-36.61a74 74 0 0 0 0-98.29a22 22 0 1 1 32.87-29.24a118 118 0 0 1 0 156.76a22 22 0 0 1-16.44 7.38"/><path fill="currentColor" d="M139.29 392.72a21.92 21.92 0 0 1-16.08-7a190 190 0 0 1 0-259.49a22 22 0 1 1 32.13 30.06a146 146 0 0 0 0 199.38a22 22 0 0 1-16.06 37Zm233.42 0a22 22 0 0 1-16.06-37a146 146 0 0 0 0-199.38a22 22 0 1 1 32.13-30.06a190 190 0 0 1 0 259.49a21.92 21.92 0 0 1-16.07 6.95"/><path fill="currentColor" d="M429 438a22 22 0 0 1-16.39-36.67a218.34 218.34 0 0 0 0-290.66a22 22 0 0 1 32.78-29.34a262.34 262.34 0 0 1 0 349.34A22 22 0 0 1 429 438m-346 0a21.94 21.94 0 0 1-16.41-7.33a262.34 262.34 0 0 1 0-349.34a22 22 0 0 1 32.78 29.34a218.34 218.34 0 0 0 0 290.66A22 22 0 0 1 83 438"/></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%20512%20512%22%3E%3Ccircle%20cx%3D%22256%22%20cy%3D%22256%22%20r%3D%2236%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M190.24%20341.77a22%2022%200%200%201-16.46-7.38a118%20118%200%200%201%200-156.76a22%2022%200%201%201%2032.87%2029.24a74%2074%200%200%200%200%2098.29a22%2022%200%200%201-16.43%2036.61Zm131.52%200a22%2022%200%200%201-16.43-36.61a74%2074%200%200%200%200-98.29a22%2022%200%201%201%2032.87-29.24a118%20118%200%200%201%200%20156.76a22%2022%200%200%201-16.44%207.38%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M139.29%20392.72a21.92%2021.92%200%200%201-16.08-7a190%20190%200%200%201%200-259.49a22%2022%200%201%201%2032.13%2030.06a146%20146%200%200%200%200%20199.38a22%2022%200%200%201-16.06%2037Zm233.42%200a22%2022%200%200%201-16.06-37a146%20146%200%200%200%200-199.38a22%2022%200%201%201%2032.13-30.06a190%20190%200%200%201%200%20259.49a21.92%2021.92%200%200%201-16.07%206.95%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M429%20438a22%2022%200%200%201-16.39-36.67a218.34%20218.34%200%200%200%200-290.66a22%2022%200%200%201%2032.78-29.34a262.34%20262.34%200%200%201%200%20349.34A22%2022%200%200%201%20429%20438m-346%200a21.94%2021.94%200%200%201-16.41-7.33a262.34%20262.34%200%200%201%200-349.34a22%2022%200%200%201%2032.78%2029.34a218.34%20218.34%200%200%200%200%20290.66A22%2022%200%200%201%2083%20438%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%20512%20512%22%3E%3Ccircle%20cx%3D%22256%22%20cy%3D%22256%22%20r%3D%2236%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M190.24%20341.77a22%2022%200%200%201-16.46-7.38a118%20118%200%200%201%200-156.76a22%2022%200%201%201%2032.87%2029.24a74%2074%200%200%200%200%2098.29a22%2022%200%200%201-16.43%2036.61Zm131.52%200a22%2022%200%200%201-16.43-36.61a74%2074%200%200%200%200-98.29a22%2022%200%201%201%2032.87-29.24a118%20118%200%200%201%200%20156.76a22%2022%200%200%201-16.44%207.38%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M139.29%20392.72a21.92%2021.92%200%200%201-16.08-7a190%20190%200%200%201%200-259.49a22%2022%200%201%201%2032.13%2030.06a146%20146%200%200%200%200%20199.38a22%2022%200%200%201-16.06%2037Zm233.42%200a22%2022%200%200%201-16.06-37a146%20146%200%200%200%200-199.38a22%2022%200%201%201%2032.13-30.06a190%20190%200%200%201%200%20259.49a21.92%2021.92%200%200%201-16.07%206.95%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M429%20438a22%2022%200%200%201-16.39-36.67a218.34%20218.34%200%200%200%200-290.66a22%2022%200%200%201%2032.78-29.34a262.34%20262.34%200%200%201%200%20349.34A22%2022%200%200%201%20429%20438m-346%200a21.94%2021.94%200%200%201-16.41-7.33a262.34%20262.34%200%200%201%200-349.34a22%2022%200%200%201%2032.78%2029.34a218.34%20218.34%200%200%200%200%20290.66A22%2022%200%200%201%2083%20438%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/radio.svg?color=%231a73e8&size=48
