Gift Card Money icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V14.05C21.8384 14.0172 21.6712 14 21.5 14H20.5V9.5H10.5607L12.2803 11.2197C12.5732 11.5126 12.5732 11.9874 12.2803 12.2803C11.9874 12.5732 11.5126 12.5732 11.2197 12.2803L9.49999 10.5607V15.5H11.208C11.0742 15.8062 11 16.1444 11 16.5V17H5C3.34315 17 2 15.6569 2 14V5ZM5 3.5C4.17157 3.5 3.5 4.17157 3.5 5V8H4.70803C4.57422 7.69377 4.5 7.35555 4.5 6.99999C4.5 5.61928 5.61928 4.5 6.99999 4.49999C7.35554 4.49999 7.69376 4.57422 7.99999 4.70801V3.5H5ZM9.49999 3.5V4.70803C9.80622 4.57423 10.1444 4.5 10.5 4.5C11.8807 4.5 13 5.61929 13 7C13 7.35555 12.9258 7.69377 12.792 8H20.5V5C20.5 4.17157 19.8284 3.5 19 3.5H9.49999ZM7.99999 15.5V10.5607L6.28033 12.2803C5.98744 12.5732 5.51256 12.5732 5.21967 12.2803C4.92678 11.9874 4.92678 11.5126 5.21967 11.2197L6.93934 9.5H3.5V14C3.5 14.8284 4.17157 15.5 5 15.5H7.99999ZM10.5 8C11.0523 8 11.5 7.55228 11.5 7C11.5 6.44772 11.0523 6 10.5 6C9.94772 6 9.5 6.44772 9.5 7V8H10.5ZM7.99999 6.99581C7.99774 6.44545 7.55089 5.99999 7 5.99999C6.44771 6 6 6.44771 6 6.99999C6 7.55228 6.44771 7.99999 7 7.99999H7.99999V6.99581ZM12 16.5C12 15.6716 12.6716 15 13.5 15H21.5C22.3284 15 23 15.6716 23 16.5V20.5C23 21.3284 22.3284 22 21.5 22H13.5C12.6716 22 12 21.3284 12 20.5V16.5ZM22 17C21.4477 17 21 16.5523 21 16H20C20 17.1046 20.8954 18 22 18V17ZM22 19C20.8954 19 20 19.8954 20 21H21C21 20.4477 21.4477 20 22 20V19ZM14 16C14 16.5523 13.5523 17 13 17V18C14.1046 18 15 17.1046 15 16H14ZM15 21C15 19.8954 14.1046 19 13 19V20C13.5523 20 14 20.4477 14 21H15ZM19.25 18.5C19.25 17.5335 18.4665 16.75 17.5 16.75C16.5335 16.75 15.75 17.5335 15.75 18.5C15.75 19.4665 16.5335 20.25 17.5 20.25C18.4665 20.25 19.25 19.4665 19.25 18.5Z" 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_money_24_regular.svg";

Details

Keywords

presentbirthdaycelebrationappreciationwalletbalance