Image Circle icon

Use the Image Circle 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 { ImageCircle24Regular, ImageCircle24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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 14.0808 4.2477 15.987 5.48909 17.4646L10.4241 12.6219C11.2992 11.7631 12.7008 11.7631 13.5759 12.6219L18.5109 17.4646C19.7523 15.987 20.5 14.0808 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM17.4489 18.524L12.5253 13.6925C12.2336 13.4062 11.7664 13.4062 11.4747 13.6925L6.55108 18.524C8.02642 19.7576 9.92651 20.5 12 20.5C14.0735 20.5 15.9736 19.7576 17.4489 18.524ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM15.25 9.5C14.8358 9.5 14.5 9.16421 14.5 8.75C14.5 8.33579 14.8358 8 15.25 8C15.6642 8 16 8.33579 16 8.75C16 9.16421 15.6642 9.5 15.25 9.5ZM15.25 11C16.4926 11 17.5 9.99264 17.5 8.75C17.5 7.50736 16.4926 6.5 15.25 6.5C14.0074 6.5 13 7.50736 13 8.75C13 9.99264 14.0074 11 15.25 11Z" 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/image_circle_24_regular.svg";

Details

Keywords

photopicturesnapshotcontentplaceholderprofileavatar