Code Circle icon
Used in coding scenarios. The Code 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 Code 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 { CodeCircle24Regular, CodeCircle24Filled } from "@fluentui/react-icons";
export function Example() {
return <CodeCircle24Regular aria-label="Code Circle" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_code_circle_24_regular.svg" width="24" height="24" alt="Code 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="M14.5452 6.06083C14.9259 6.22399 15.1023 6.66489 14.9391 7.04562L10.4394 17.5456C10.2762 17.9263 9.83534 18.1027 9.45462 17.9396C9.07389 17.7764 8.89752 17.3355 9.06068 16.9548L13.5604 6.45477C13.7236 6.07404 14.1645 5.89767 14.5452 6.06083ZM8.80747 9.24826C9.08457 9.55614 9.05961 10.0304 8.75172 10.3074L6.87114 12L8.75172 13.6925C9.05961 13.9696 9.08457 14.4438 8.80747 14.7517C8.53038 15.0596 8.05616 15.0845 7.74828 14.8075L5.24828 12.5574C5.09024 12.4152 5 12.2126 5 12C5 11.7874 5.09024 11.5847 5.24828 11.4425L7.74828 9.19251C8.05616 8.91541 8.53038 8.94037 8.80747 9.24826ZM15.1925 9.24826C14.9154 9.55614 14.9404 10.0304 15.2483 10.3074L17.1289 12L15.2483 13.6925C14.9404 13.9696 14.9154 14.4438 15.1925 14.7517C15.4696 15.0596 15.9438 15.0845 16.2517 14.8075L18.7517 12.5574C18.9098 12.4152 19 12.2126 19 12C19 11.7874 18.9098 11.5847 18.7517 11.4425L16.2517 9.19251C15.9438 8.91541 15.4696 8.94037 15.1925 9.24826ZM22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12ZM3.5 12C3.5 7.30558 7.30558 3.5 12 3.5C16.6944 3.5 20.5 7.30558 20.5 12C20.5 16.6944 16.6944 20.5 12 20.5C7.30558 20.5 3.5 16.6944 3.5 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/code_circle_24_regular.svg";Details
| Name | Code Circle |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_code_circle_24_regular.svg |
| Filled file | ic_fluent_code_circle_24_filled.svg |
| React components | CodeCircle24Regular, CodeCircle24Filled |
| License | MIT (© Microsoft Corporation) |