Gift Card icon

Use the Gift Card 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 { GiftCard24Regular, GiftCard24Filled } from "@fluentui/react-icons";

export function Example() {
  return <GiftCard24Regular aria-label="Gift Card" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_gift_card_24_regular.svg" width="24" height="24" alt="Gift Card">

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="M5.25 4C3.45507 4 2 5.45507 2 7.25V15.75C2 17.5449 3.45507 19 5.25 19H18.75C20.5449 19 22 17.5449 22 15.75V7.25C22 5.45507 20.5449 4 18.75 4H5.25ZM3.5 7.25C3.5 6.2835 4.2835 5.5 5.25 5.5H8V6.70802C7.69377 6.57422 7.35555 6.5 7 6.5C5.61929 6.5 4.5 7.61929 4.5 9C4.5 9.35555 4.57422 9.69377 4.70802 10H3.5V7.25ZM9.5 9C9.5 8.44772 9.94772 8 10.5 8C11.0523 8 11.5 8.44772 11.5 9C11.5 9.55228 11.0523 10 10.5 10H9.5V9ZM8 10H7C6.44772 10 6 9.55228 6 9C6 8.44772 6.44772 8 7 8C7.5521 8 7.9997 8.44797 8 9C8 9.00018 8 8.99982 8 9V10ZM8 12.5607V17.5H5.25C4.2835 17.5 3.5 16.7165 3.5 15.75V11.5H6.93934L5.21967 13.2197C4.92678 13.5126 4.92678 13.9874 5.21967 14.2803C5.51256 14.5732 5.98744 14.5732 6.28033 14.2803L8 12.5607ZM9.5 17.5V12.5607L11.2197 14.2803C11.5126 14.5732 11.9874 14.5732 12.2803 14.2803C12.5732 13.9874 12.5732 13.5126 12.2803 13.2197L10.5607 11.5H20.5V15.75C20.5 16.7165 19.7165 17.5 18.75 17.5H9.5ZM9.5 6.70802V5.5H18.75C19.7165 5.5 20.5 6.2835 20.5 7.25V10H12.792C12.9258 9.69377 13 9.35555 13 9C13 7.61929 11.8807 6.5 10.5 6.5C10.1444 6.5 9.80623 6.57422 9.5 6.70802Z" 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/gift_card_24_regular.svg";

Details

Keywords

presentbirthdaycelebrationappreciationwalletbalance