Circle Image icon
Used to represent a curated content collection. The Circle Image 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 Image 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 { CircleImage24Regular, CircleImage24Filled } from "@fluentui/react-icons";
export function Example() {
return <CircleImage24Regular aria-label="Circle Image" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_circle_image_24_regular.svg" width="24" height="24" alt="Circle Image"> 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="M18.75 9C20.5449 9 22 10.4551 22 12.25V18.75C22 20.5449 20.5449 22 18.75 22H12.25C10.4551 22 9 20.5449 9 18.75V12.25C9 10.4551 10.4551 9 12.25 9H18.75ZM16.207 17.2676C15.8165 16.8772 15.1835 16.8772 14.793 17.2676L11.6621 20.3984C11.8459 20.464 12.0437 20.5 12.25 20.5H18.75C18.9563 20.5 19.1541 20.464 19.3379 20.3984L16.207 17.2676ZM12.25 10.5C11.2835 10.5 10.5 11.2835 10.5 12.25V18.75C10.5 18.9563 10.536 19.1541 10.6016 19.3379L13.7324 16.207C14.7087 15.2309 16.2913 15.2309 17.2676 16.207L20.3984 19.3379C20.464 19.1541 20.5 18.9563 20.5 18.75V12.25C20.5 11.2835 19.7165 10.5 18.75 10.5H12.25ZM9.5 2C13.1284 2 16.1547 4.57667 16.8496 8H15.3115C14.6455 5.41209 12.2958 3.5 9.5 3.5C6.18629 3.5 3.5 6.18629 3.5 9.5C3.5 12.2957 5.41221 14.6444 8 15.3105V16.8496C4.57667 16.1547 2 13.1284 2 9.5C2 5.35786 5.35786 2 9.5 2ZM18 11.75C18.6904 11.75 19.25 12.3096 19.25 13C19.25 13.6904 18.6904 14.25 18 14.25C17.3096 14.25 16.75 13.6904 16.75 13C16.75 12.3096 17.3096 11.75 18 11.75Z" 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_image_24_regular.svg";Details
| Name | Circle Image |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_circle_image_24_regular.svg |
| Filled file | ic_fluent_circle_image_24_filled.svg |
| React components | CircleImage24Regular, CircleImage24Filled |
| License | MIT (© Microsoft Corporation) |