Color

This icon uses multiple colors. Use the SVG Editor to customize it.

Open in SVG Editor

Carbon Icons

Radio Button Icon

Free SVG icon from the Carbon Icons collection. Download or copy for use in any project.

Download SVG

Collection: Carbon Icons
Format: SVG, React, Angular, Vue, Web Component, PNG
License: Apache-2.0 - Free for commercial use
Tags: radio button

The Radio Button icon is available as a free SVG and is ready to drop into any web or app project.

img tag

<img src="https://proicons.com/icon/321083.svg" alt="Radio Button icon" width="24" height="24">

React JSX

<img src="https://proicons.com/icon/321083.svg" alt="Radio Button icon" width={24} height={24} />

Vue template

<img
  src="https://proicons.com/icon/321083.svg"
  alt="Radio Button icon"
  :width="24"
  :height="24"
/>

CSS background

.icon-radio-button {
  background-image: url('https://proicons.com/icon/321083.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
  display: inline-block;
}

SVG markup

<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>radio-button</title>
    <g id="radio-button" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect id="Rectangle-6-Copy-27" fill="#A8A8A8" x="107" y="56" width="91" height="5"></rect>
        <g id="Group" transform="translate(82.000000, 51.000000)">
            <path d="M7,0.875 C3.61725591,0.875 0.875,3.61725591 0.875,7 C0.875,10.3827441 3.61725591,13.125 7,13.125 C10.3827441,13.125 13.125,10.3827441 13.125,7 C13.125,5.375549 12.4796894,3.81763128 11.331029,2.66897097 C10.1823687,1.52031065 8.624451,0.875 7,0.875 Z M7,12.25 C4.10050506,12.25 1.75,9.89949494 1.75,7 C1.75,4.10050506 4.10050506,1.75 7,1.75 C9.89949494,1.75 12.25,4.10050506 12.25,7 C12.25,8.39238657 11.6968766,9.72774461 10.7123106,10.7123106 C9.72774461,11.6968766 8.39238657,12.25 7,12.25 Z" id="Shape" fill="#252525" fill-rule="nonzero"></path>
            <rect id="Rectangle-path" x="0" y="0" width="14" height="14"></rect>
            <path d="M7,21 C3.13400675,21 5.32907052e-15,24.1340068 5.32907052e-15,28 C5.32907052e-15,31.8659932 3.13400675,35 7,35 C10.8659932,35 14,31.8659932 14,28 C14,26.1434846 13.2625021,24.3630072 11.9497475,23.0502525 C10.6369928,21.7374979 8.85651543,21 7,21 Z M7,34 C3.6862915,34 1,31.3137085 1,28 C1,24.6862915 3.6862915,22 7,22 C10.3137085,22 13,24.6862915 13,28 C13,29.5912989 12.367859,31.1174224 11.2426407,32.2426407 C10.1174224,33.367859 8.59129894,34 7,34 Z" id="Shape-Copy" fill="#252525" fill-rule="nonzero"></path>
            <circle id="Oval-Copy" fill="#171717" fill-rule="nonzero" cx="7" cy="28" r="3"></circle>
        </g>
        <rect id="Rectangle-6-Copy-28" fill="#A8A8A8" x="107" y="77" width="131" height="5"></rect>
        <rect id="Rectangle-6-Copy-29" fill="#A8A8A8" x="107" y="98" width="91" height="5"></rect>
        <rect id="Rectangle-6-Copy-30" fill="#A8A8A8" x="107" y="119" width="131" height="5"></rect>
        <g id="Group-Copy" transform="translate(82.000000, 93.000000)">
            <path d="M7,0.875 C3.61725591,0.875 0.875,3.61725591 0.875,7 C0.875,10.3827441 3.61725591,13.125 7,13.125 C10.3827441,13.125 13.125,10.3827441 13.125,7 C13.125,5.375549 12.4796894,3.81763128 11.331029,2.66897097 C10.1823687,1.52031065 8.624451,0.875 7,0.875 Z M7,12.25 C4.10050506,12.25 1.75,9.89949494 1.75,7 C1.75,4.10050506 4.10050506,1.75 7,1.75 C9.89949494,1.75 12.25,4.10050506 12.25,7 C12.25,8.39238657 11.6968766,9.72774461 10.7123106,10.7123106 C9.72774461,11.6968766 8.39238657,12.25 7,12.25 Z" id="Shape" fill="#252525" fill-rule="nonzero"></path>
            <rect id="Rectangle-path" x="0" y="0" width="14" height="14"></rect>
        </g>
        <g id="Group-Copy-2" transform="translate(82.000000, 114.000000)">
            <path d="M7,0.875 C3.61725591,0.875 0.875,3.61725591 0.875,7 C0.875,10.3827441 3.61725591,13.125 7,13.125 C10.3827441,13.125 13.125,10.3827441 13.125,7 C13.125,5.375549 12.4796894,3.81763128 11.331029,2.66897097 C10.1823687,1.52031065 8.624451,0.875 7,0.875 Z M7,12.25 C4.10050506,12.25 1.75,9.89949494 1.75,7 C1.75,4.10050506 4.10050506,1.75 7,1.75 C9.89949494,1.75 12.25,4.10050506 12.25,7 C12.25,8.39238657 11.6968766,9.72774461 10.7123106,10.7123106 C9.72774461,11.6968766 8.39238657,12.25 7,12.25 Z" id="Shape" fill="#252525" fill-rule="nonzero"></path>
            <rect id="Rectangle-path" x="0" y="0" width="14" height="14"></rect>
        </g>
    </g>
</svg>

Radio Button in other icon packs

Phosphor Icons

Hugeicons

Ikonate

Radix Icons

OpenMoji

Copied!

Radio Button Icon

More from Carbon Icons

Radio Button in other icon packs