Guitar icon

Use the Guitar 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 { Guitar24Regular, Guitar24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M11.6339 14.0849C11.1457 14.5731 10.3543 14.5731 9.86612 14.0849C9.37796 13.5967 9.37796 12.8053 9.86612 12.3171C10.3543 11.829 11.1457 11.829 11.6339 12.3171C12.122 12.8053 12.122 13.5967 11.6339 14.0849ZM18.1461 2.71569C18.8295 2.03227 19.9375 2.03227 20.621 2.71569L21.3281 3.4228C22.0115 4.10621 22.0115 5.21425 21.3281 5.89767L16.2274 10.9984C17.1364 12.3369 16.6939 14.2379 15.1764 14.9966L14.3436 15.413C14.0982 15.5357 13.9653 15.8074 14.0191 16.0764L14.0336 16.1487C14.3892 17.9265 13.6923 19.7505 12.2419 20.8383C9.8424 22.6379 6.48474 22.3993 4.36385 20.2784L3.76536 19.6799C1.64447 17.559 1.40585 14.2013 3.20548 11.8018C4.29327 10.3515 6.11725 9.65458 7.89502 10.0101L7.96737 10.0246C8.23636 10.0784 8.50807 9.94551 8.63075 9.70016L9.04714 8.86736C9.80587 7.34989 11.7068 6.90736 13.0454 7.81639L18.1461 2.71569ZM19.5603 3.77635C19.4627 3.67872 19.3044 3.67872 19.2067 3.77635L18.022 4.96105L19.0827 6.02171L20.2674 4.83701C20.365 4.73938 20.365 4.58109 20.2674 4.48346L19.5603 3.77635ZM18.022 7.08237L16.9614 6.02171L13.6106 9.37252C13.3177 9.66541 12.8428 9.66541 12.5499 9.37252L12.3907 9.2133C11.7874 8.61001 10.7703 8.77506 10.3888 9.53818L9.97239 10.371C9.54721 11.2213 8.60547 11.6819 7.6732 11.4955L7.60085 11.481C6.38951 11.2387 5.14668 11.7136 4.40548 12.7018C3.05374 14.5042 3.23297 17.0262 4.82602 18.6192L5.42451 19.2177C7.01756 20.8108 9.53958 20.99 11.3419 19.6383C12.3302 18.8971 12.805 17.6542 12.5627 16.4429L12.5483 16.3706C12.3618 15.4383 12.8224 14.4965 13.6728 14.0714L14.5056 13.655C15.2687 13.2734 15.4337 12.2563 14.8304 11.653L14.6712 11.4938C14.3783 11.2009 14.3783 10.7261 14.6712 10.4332L18.022 7.08237Z" 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/guitar_24_regular.svg";

Details

Keywords

musiccreateinstrument