Bug icon (Filled & Regular)

Used to represent bugs in code or malicious bugs in the system. The Bug 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 Bug 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 { Bug24Regular, Bug24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Bug24Regular aria-label="Bug" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_bug_24_regular.svg" width="24" height="24" alt="Bug">

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.5 2.75195C10.5 2.33774 10.1642 2.00195 9.75 2.00195C9.33579 2.00195 9 2.33774 9 2.75195V3.50406C9 4.13652 9.19571 4.72327 9.52988 5.20705C8.13703 5.68607 7.11506 6.9624 7.00909 8.49092H6.76245L6.75315 8.4909C5.51052 8.48576 4.50733 7.47425 4.51247 6.23162L4.51861 4.74602C4.52032 4.33181 4.18593 3.99464 3.77172 3.99293C3.35751 3.99121 3.02034 4.32561 3.01863 4.73982L3.01248 6.22542C3.00392 8.29647 4.6759 9.98232 6.74695 9.99089L6.76245 9.99092H7V11.5006H2.75C2.33579 11.5006 2 11.8364 2 12.2506C2 12.6648 2.33579 13.0006 2.75 13.0006H7V14.9929H6.76245L6.74695 14.9929C4.6759 15.0015 3.00392 16.6874 3.01248 18.7584L3.01863 20.244C3.02034 20.6582 3.35751 20.9926 3.77172 20.9909C4.18593 20.9892 4.52032 20.652 4.51861 20.2378L4.51247 18.7522C4.50733 17.5096 5.51052 16.4981 6.75315 16.4929L6.76245 16.4929H7.22633C7.86093 18.5257 9.75816 20.0011 12 20.0011C14.2418 20.0011 16.1391 18.5257 16.7737 16.4929H17.2375L17.2468 16.4929C18.4895 16.4981 19.4927 17.5096 19.4875 18.7522L19.4814 20.2378C19.4797 20.652 19.8141 20.9892 20.2283 20.9909C20.6425 20.9926 20.9797 20.6582 20.9814 20.244L20.9875 18.7584C20.9961 16.6874 19.3241 15.0015 17.253 14.9929L17.2375 14.9929H17V13.0006H21.2514C21.6656 13.0006 22.0014 12.6648 22.0014 12.2506C22.0014 11.8364 21.6656 11.5006 21.2514 11.5006H17V9.99092H17.2375L17.253 9.99089C19.3241 9.98232 20.9961 8.29647 20.9875 6.22542L20.9814 4.73982C20.9797 4.32561 20.6425 3.99121 20.2283 3.99293C19.8141 3.99464 19.4797 4.33181 19.4814 4.74602L19.4875 6.23162C19.4927 7.47425 18.4895 8.48576 17.2468 8.4909L17.2375 8.49092H16.9909C16.8849 6.9624 15.863 5.68607 14.4701 5.20706C14.8043 4.72328 15 4.13653 15 3.50406V2.75195C15 2.33774 14.6642 2.00195 14.25 2.00195C13.8358 2.00195 13.5 2.33774 13.5 2.75195V3.50406C13.5 4.33249 12.8284 5.00406 12 5.00406C11.1716 5.00406 10.5 4.33249 10.5 3.50406V2.75195ZM8.5 8.75409C8.5 7.51145 9.50736 6.50409 10.75 6.50409H13.25C14.4926 6.50409 15.5 7.51145 15.5 8.75409V15.0011C15.5 16.9341 13.933 18.5011 12 18.5011C10.067 18.5011 8.5 16.9341 8.5 15.0011V8.75409Z" 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/bug_24_regular.svg";

Details

Name	Bug
Styles	Regular (outlined), Filled
Size	24 × 24 px (scalable SVG)
Regular (outlined) file	`ic_fluent_bug_24_regular.svg`
Filled file	`ic_fluent_bug_24_filled.svg`
React components	`Bug24Regular, Bug24Filled`
License	MIT (© Microsoft Corporation)

Keywords

code

Bug icon

Use the Bug icon in React

Use it in HTML

Use it from the SVG package

Details

Keywords

Related icons