Radio Button icon

Use the Radio Button icon in React

Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.

npm install @fluentui/react-icons

import { RadioButton24Regular, RadioButton24Filled } from "@fluentui/react-icons";

export function Example() {
  return <RadioButton24Regular aria-label="Radio Button" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_radio_button_24_regular.svg" width="24" height="24" alt="Radio Button">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 22.0021C17.5237 22.0021 22.0015 17.5243 22.0015 12.0006C22.0015 6.47687 17.5237 1.99902 12 1.99902C6.47626 1.99902 1.99841 6.47687 1.99841 12.0006C1.99841 17.5243 6.47626 22.0021 12 22.0021ZM12 20.5021C7.30469 20.5021 3.49841 16.6959 3.49841 12.0006C3.49841 7.3053 7.30469 3.49902 12 3.49902C16.6952 3.49902 20.5015 7.3053 20.5015 12.0006C20.5015 16.6959 16.6952 20.5021 12 20.5021Z" fill="currentColor"/></svg>

Use it from the SVG package

Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/radio_button_24_regular.svg";

Details

Keywords

buttonuiselecttoggle