Circle Highlight icon
Used to represent image editing. The Circle Highlight icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Circle Highlight 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 { CircleHighlight24Regular, CircleHighlight24Filled } from "@fluentui/react-icons";
export function Example() {
return <CircleHighlight24Regular aria-label="Circle Highlight" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_circle_highlight_24_regular.svg" width="24" height="24" alt="Circle Highlight"> 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="M10.559 3.62164L13.7178 6.78042C14.0107 7.07331 14.4856 7.07331 14.7785 6.78042C15.0714 6.48753 15.0714 6.01265 14.7785 5.71976L12.5781 3.51935C13.4147 3.57553 14.2182 3.75278 14.9711 4.03371L17.4678 6.53042C17.7567 6.81936 18.2228 6.82326 18.5165 6.54212C19.7545 8.01872 20.5 9.92231 20.5 12C20.5 16.6944 16.6944 20.5 12 20.5C9.92228 20.5 8.01868 19.7545 6.54207 18.5165C6.82129 18.2226 6.81676 17.758 6.52847 17.4698L4.03604 14.9773C3.75423 14.2239 3.57628 13.4197 3.51963 12.5822L5.71781 14.7804C6.0107 15.0733 6.48557 15.0733 6.77847 14.7804C7.07136 14.4875 7.07136 14.0127 6.77847 13.7198L3.62107 10.5624C3.70825 10.0506 3.84119 9.55438 4.01552 9.07813L6.71781 11.7804C7.0107 12.0733 7.48557 12.0733 7.77847 11.7804C8.07136 11.4875 8.07136 11.0127 7.77847 10.7198L4.7007 7.64199C4.9322 7.25508 5.19358 6.88812 5.48167 6.54428L8.21781 9.28042C8.5107 9.57331 8.98557 9.57331 9.27847 9.28042C9.57136 8.98753 9.57136 8.51265 9.27847 8.21976L6.54216 5.48345C6.88588 5.19527 7.25274 4.93377 7.63955 4.70216L10.7178 7.78042C11.0107 8.07331 11.4856 8.07331 11.7785 7.78042C12.0714 7.48753 12.0714 7.01265 11.7785 6.71976L9.07527 4.01656C9.55135 3.8421 10.0474 3.70901 10.559 3.62164ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z" 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_highlight_24_regular.svg";Details
| Name | Circle Highlight |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_circle_highlight_24_regular.svg |
| Filled file | ic_fluent_circle_highlight_24_filled.svg |
| React components | CircleHighlight24Regular, CircleHighlight24Filled |
| License | MIT (© Microsoft Corporation) |