Medal icon

Use the Medal 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 { Medal24Regular, Medal24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M17.0488 2C18.0359 2.00012 18.9693 2.44898 19.5859 3.21973L20.2881 4.09766C20.7487 4.67342 21 5.38864 21 6.12598C21 6.76731 20.81 7.3942 20.4541 7.92773L16.2041 14.2949C16.707 15.0749 17 16.003 17 17C17 19.7614 14.7614 22 12 22C9.23858 22 7 19.7614 7 17C7 16.0034 7.29141 15.0747 7.79395 14.2949L3.5498 7.92871C3.19397 7.39496 3.00398 6.76746 3.00391 6.12598C3.00391 5.38909 3.2541 4.67351 3.71387 4.09766L4.41309 3.22168C5.02979 2.44942 5.96483 2 6.95312 2H17.0488ZM12 13.5C10.067 13.5 8.5 15.067 8.5 17C8.5 18.933 10.067 20.5 12 20.5C13.933 20.5 15.5 18.933 15.5 17C15.5 15.067 13.933 13.5 12 13.5ZM6.01367 3.77441C5.85285 3.87687 5.70776 4.00566 5.58594 4.1582L4.88672 5.03418C4.63919 5.34424 4.50391 5.72923 4.50391 6.12598C4.50398 6.47132 4.60628 6.80933 4.79785 7.09668L8.82422 13.1367C9.44177 12.6285 10.1837 12.2652 10.9971 12.0996L6.33594 5.10742C6.1171 4.77912 6.00002 4.39358 6 3.99902C6 3.92305 6.00542 3.84819 6.01367 3.77441ZM17.9971 3.99902C17.9971 4.39361 17.88 4.7791 17.6611 5.10742L13 12.0996C13.8139 12.2648 14.5558 12.6284 15.1738 13.1367L19.2061 7.0957C19.3976 6.8086 19.5 6.47111 19.5 6.12598C19.5 5.72924 19.365 5.34398 19.1172 5.03418L18.415 4.15723C18.2919 4.00333 18.1452 3.87333 17.9824 3.77051C17.991 3.84556 17.9971 3.92168 17.9971 3.99902ZM9.7334 7.5L11.998 10.8975L14.2637 7.5H9.7334ZM7.99902 3.5C7.72348 3.5 7.5 3.72348 7.5 3.99902C7.50002 4.09744 7.52941 4.19349 7.58398 4.27539L8.7334 6H15.2627L16.4131 4.27539C16.4677 4.19347 16.4971 4.09748 16.4971 3.99902C16.4971 3.72348 16.2736 3.5 15.998 3.5H7.99902Z" 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/medal_24_regular.svg";

Details