Reward icon

Use the Reward 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 { Reward24Regular, Reward24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M20.25 1.99902C21.2165 1.99902 22 2.78253 22 3.74902V6.79173C22 7.81589 21.4309 8.7552 20.5231 9.22932L14.2413 12.5097C15.8773 13.3314 17 15.0248 17 16.9804C17 19.7418 14.7614 21.9804 12 21.9804C9.23858 21.9804 7 19.7418 7 16.9804C7 15.0248 8.12271 13.3314 9.75875 12.5097L3.47693 9.22932C2.56913 8.7552 2 7.81589 2 6.79173V3.74902C2 2.78253 2.7835 1.99902 3.75 1.99902H20.25ZM12 13.4804C10.067 13.4804 8.5 15.0474 8.5 16.9804C8.5 18.9134 10.067 20.4804 12 20.4804C13.933 20.4804 15.5 18.9134 15.5 16.9804C15.5 15.0474 13.933 13.4804 12 13.4804ZM15.5 3.49802H8.5V10.16L11.8843 11.9279C11.9568 11.9658 12.0432 11.9658 12.1157 11.9279L15.5 10.159V3.49802ZM7 3.49802L3.75 3.49902C3.61193 3.49902 3.5 3.61095 3.5 3.74902V6.79173C3.5 7.25726 3.75869 7.68422 4.17133 7.89973L7 9.37602V3.49802ZM20.25 3.49902L17 3.49802V9.37602L19.8287 7.89973C20.2413 7.68422 20.5 7.25726 20.5 6.79173V3.74902C20.5 3.61095 20.3881 3.49902 20.25 3.49902Z" 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/reward_24_regular.svg";

Details

Keywords

medalearnaccoladeawardbenefitbonus