radio icon

Common uses

• Selecting a single option from a list
• Choosing a preferred setting
• Indicating a default or selected state

Use it in React

npm i @heroicons/react

import { RadioIcon } from '@heroicons/react/24/outline';

<RadioIcon className="size-6" />

Styles

Heroicons ships this icon in 4 styles — each its own import:

<RadioIcon className="size-6" />

<RadioIcon className="size-6" />

<RadioIcon className="size-6" />

<RadioIcon className="size-6" />

Details

Library

Heroicons (324 icons)

License

MIT

viewBox

0 0 24 24

Keywords

radioradio buttonoption selectorchoice iconselection

FAQ

What is the radio button icon used for?

It's used to allow users to select one option from a set of choices where only one can be active at a time.

How do I use the radio icon in React?

You can import and use it like this: import { RadioIcon } from '@heroicons/react/24/outline'.

What is the license for Heroicons?

Heroicons are distributed under the MIT license, allowing for free use in both personal and commercial projects.

Related icons

The same idea in other libraries, and near matches in Heroicons.