Gift Card Multiple icon
Used in gift cards scenarios. The Gift Card Multiple icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Gift Card Multiple 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 { GiftCardMultiple24Regular, GiftCardMultiple24Filled } from "@fluentui/react-icons";
export function Example() {
return <GiftCardMultiple24Regular aria-label="Gift Card Multiple" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_gift_card_multiple_24_regular.svg" width="24" height="24" alt="Gift Card Multiple"> 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 4C3.34315 4 2 5.34315 2 7V14.5C2 16.1569 3.34315 17.5 5 17.5H16.5C18.1569 17.5 19.5 16.1569 19.5 14.5V7C19.5 5.34315 18.1569 4 16.5 4H5ZM3.5 7C3.5 6.17157 4.17157 5.5 5 5.5H7.99999V6.70801C7.69376 6.57422 7.35554 6.49999 6.99999 6.49999C5.61928 6.5 4.5 7.61928 4.5 8.99999C4.5 9.35555 4.57422 9.69377 4.70803 10H3.5V7ZM9.49999 6.70803V5.5H16.5C17.3284 5.5 18 6.17157 18 7V10H12.792C12.9258 9.69377 13 9.35555 13 9C13 7.61929 11.8807 6.5 10.5 6.5C10.1444 6.5 9.80622 6.57423 9.49999 6.70803ZM10.5607 11.5H18V14.5C18 15.3284 17.3284 16 16.5 16H9.49999V12.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.5ZM7.99999 12.5607V16H5C4.17157 16 3.5 15.3284 3.5 14.5V11.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.2803L7.99999 12.5607ZM11.5 9C11.5 9.55228 11.0523 10 10.5 10H9.5V9C9.5 8.44772 9.94772 8 10.5 8C11.0523 8 11.5 8.44772 11.5 9ZM7 7.99999C7.55089 7.99999 7.99774 8.44545 7.99999 8.99581V9.99999H7C6.44771 9.99999 6 9.55228 6 8.99999C6 8.44771 6.44771 8 7 7.99999ZM7.50002 20C6.3896 20 5.42008 19.3967 4.90137 18.5H16.5C18.7092 18.5 20.5 16.7092 20.5 14.5V6.90137C21.3967 7.42008 22 8.3896 22 9.50002V14.5C22 17.5376 19.5376 20 16.5 20H7.50002Z" 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_multiple_24_regular.svg";Details
| Name | Gift Card Multiple |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_gift_card_multiple_24_regular.svg |
| Filled file | ic_fluent_gift_card_multiple_24_filled.svg |
| React components | GiftCardMultiple24Regular, GiftCardMultiple24Filled |
| License | MIT (© Microsoft Corporation) |