Checkmark Underline Circle icon
Used to indicate a downloaded file when offline. The Checkmark Underline Circle 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 Checkmark Underline 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 { CheckmarkUnderlineCircle24Regular, CheckmarkUnderlineCircle24Filled } from "@fluentui/react-icons";
export function Example() {
return <CheckmarkUnderlineCircle24Regular aria-label="Checkmark Underline Circle" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_checkmark_underline_circle_24_regular.svg" width="24" height="24" alt="Checkmark Underline 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="M10.75 11.4393L15.2197 6.96967C15.5126 6.67678 15.9874 6.67678 16.2803 6.96967C16.5466 7.23594 16.5708 7.6526 16.3529 7.94621L16.2803 8.03033L11.2803 13.0303C11.0141 13.2966 10.5974 13.3208 10.3038 13.1029L10.2197 13.0303L7.71967 10.5303C7.42678 10.2374 7.42678 9.76256 7.71967 9.46967C7.98594 9.2034 8.4026 9.1792 8.69621 9.39705L8.78033 9.46967L10.75 11.4393ZM8.5 15C8.08579 15 7.75 15.3358 7.75 15.75C7.75 16.1642 8.08579 16.5 8.5 16.5H15.25C15.6642 16.5 16 16.1642 16 15.75C16 15.3358 15.6642 15 15.25 15H8.5ZM2 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 12ZM12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5Z" 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/checkmark_underline_circle_24_regular.svg";Details
| Name | Checkmark Underline Circle |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_checkmark_underline_circle_24_regular.svg |
| Filled file | ic_fluent_checkmark_underline_circle_24_filled.svg |
| React components | CheckmarkUnderlineCircle24Regular, CheckmarkUnderlineCircle24Filled |
| License | MIT (© Microsoft Corporation) |