Circle Edit icon

Use the Circle Edit 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 { CircleEdit24Regular, CircleEdit24Filled } from "@fluentui/react-icons";

export function Example() {
  return <CircleEdit24Regular aria-label="Circle Edit" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_circle_edit_24_regular.svg" width="24" height="24" alt="Circle Edit">

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 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.4571 6.9306 20.113 11.2954 20.4712L11.0613 21.4075C11.0153 21.5915 10.9949 21.7734 10.9973 21.9504C5.94525 21.4474 2 17.1844 2 12C2 6.47715 6.47715 2 12 2C17.2705 2 21.5887 6.0774 21.9723 11.2499C21.5703 11.0835 21.1423 11.0002 20.7151 11H20.713C20.623 11 20.5329 11.0038 20.4431 11.0112C19.9532 6.78263 16.36 3.5 12 3.5Z" fill="currentColor"/>
<path d="M20.7152 12H20.7131C20.1285 12.0003 19.5439 12.2234 19.0979 12.6695L13.1955 18.5719C12.8513 18.916 12.6072 19.3472 12.4892 19.8194L12.0315 21.6501C11.8325 22.4462 12.5536 23.1674 13.3497 22.9683L15.1804 22.5106C15.6526 22.3926 16.0838 22.1485 16.4279 21.8043L22.3303 15.9019C23.223 15.0093 23.223 13.5621 22.3303 12.6695C21.8843 12.2234 21.2998 12.0003 20.7152 12Z" 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/circle_edit_24_regular.svg";

Details

Keywords

round