gift icon

Gift: gift, present, gifting, giveaway. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M4.14 2.264C4.242 2.007 4.391 1.781 4.586 1.586C4.781 1.391 5.007 1.242 5.264 1.14C5.5 1.047 5.746 1 6 1C6.254 1 6.5 1.047 6.736 1.14C6.993 1.242 7.219 1.391 7.414 1.586C7.444 1.615 7.472 1.646 7.5 1.677C7.528 1.646 7.556 1.615 7.586 1.586C7.781 1.391 8.007 1.242 8.264 1.14C8.5 1.047 8.746 1 9 1C9.254 1 9.5 1.047 9.736 1.14C9.993 1.242 10.219 1.391 10.414 1.586C10.609 1.781 10.758 2.007 10.86 2.264C10.953 2.5 11 2.746 11 3L11 5L12 5C12.254 5 12.5 5.047 12.736 5.14C12.993 5.242 13.219 5.391 13.414 5.586C13.609 5.781 13.758 6.007 13.86 6.264C13.953 6.5 14 6.746 14 7L14 8C14 8.276 13.902 8.512 13.707 8.707C13.512 8.902 13.276 9 13 9L13 14C13 14.276 12.902 14.512 12.707 14.707C12.512 14.902 12.276 15 12 15L3 15C2.724 15 2.488 14.902 2.293 14.707C2.098 14.512 2 14.276 2 14L2 9C1.724 9 1.488 8.902 1.293 8.707C1.098 8.512 1 8.276 1 8L1 7C1 6.746 1.047 6.5 1.14 6.264C1.242 6.007 1.391 5.781 1.586 5.586C1.781 5.391 2.007 5.242 2.264 5.14C2.5 5.047 2.746 5 3 5L4 5L4 3C4 2.746 4.047 2.5 4.14 2.264ZM7.144 4.856C7.048 4.759 7 4.641 7 4.5L7 3C7 2.724 6.902 2.488 6.707 2.293C6.512 2.098 6.276 2 6 2C5.724 2 5.488 2.098 5.293 2.293C5.098 2.488 5 2.724 5 3L5 5L7.5 5C7.359 5 7.241 4.952 7.144 4.856ZM10 3C10 2.724 9.902 2.488 9.707 2.293C9.512 2.098 9.276 2 9 2C8.724 2 8.488 2.098 8.293 2.293C8.098 2.488 8 2.724 8 3L8 4.5C8 4.641 7.952 4.759 7.856 4.856C7.759 4.952 7.641 5 7.5 5L10 5L10 3ZM2.5 8.131C2.584 8.047 2.699 8 2.818 8L7 8L7 6L3 6C2.724 6 2.488 6.098 2.293 6.293C2.098 6.488 2 6.724 2 7L2 8C2.185 8 2.351 8.044 2.5 8.131ZM13 8L13 7C13 6.724 12.902 6.488 12.707 6.293C12.512 6.098 12.276 6 12 6L8 6L8 8L12.182 8C12.301 8 12.416 8.047 12.5 8.131C12.649 8.044 12.815 8 13 8ZM3 14L7 14L7 9L3 9L3 14ZM12 9L8 9L8 14L12 14L12 9Z"/></svg>

React

// Gentleface "gift" (line-round), MIT. https://gentleface.com/icons/gift
import type { SVGProps } from 'react';

export function GiftIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M4.14 2.264C4.242 2.007 4.391 1.781 4.586 1.586C4.781 1.391 5.007 1.242 5.264 1.14C5.5 1.047 5.746 1 6 1C6.254 1 6.5 1.047 6.736 1.14C6.993 1.242 7.219 1.391 7.414 1.586C7.444 1.615 7.472 1.646 7.5 1.677C7.528 1.646 7.556 1.615 7.586 1.586C7.781 1.391 8.007 1.242 8.264 1.14C8.5 1.047 8.746 1 9 1C9.254 1 9.5 1.047 9.736 1.14C9.993 1.242 10.219 1.391 10.414 1.586C10.609 1.781 10.758 2.007 10.86 2.264C10.953 2.5 11 2.746 11 3L11 5L12 5C12.254 5 12.5 5.047 12.736 5.14C12.993 5.242 13.219 5.391 13.414 5.586C13.609 5.781 13.758 6.007 13.86 6.264C13.953 6.5 14 6.746 14 7L14 8C14 8.276 13.902 8.512 13.707 8.707C13.512 8.902 13.276 9 13 9L13 14C13 14.276 12.902 14.512 12.707 14.707C12.512 14.902 12.276 15 12 15L3 15C2.724 15 2.488 14.902 2.293 14.707C2.098 14.512 2 14.276 2 14L2 9C1.724 9 1.488 8.902 1.293 8.707C1.098 8.512 1 8.276 1 8L1 7C1 6.746 1.047 6.5 1.14 6.264C1.242 6.007 1.391 5.781 1.586 5.586C1.781 5.391 2.007 5.242 2.264 5.14C2.5 5.047 2.746 5 3 5L4 5L4 3C4 2.746 4.047 2.5 4.14 2.264ZM7.144 4.856C7.048 4.759 7 4.641 7 4.5L7 3C7 2.724 6.902 2.488 6.707 2.293C6.512 2.098 6.276 2 6 2C5.724 2 5.488 2.098 5.293 2.293C5.098 2.488 5 2.724 5 3L5 5L7.5 5C7.359 5 7.241 4.952 7.144 4.856ZM10 3C10 2.724 9.902 2.488 9.707 2.293C9.512 2.098 9.276 2 9 2C8.724 2 8.488 2.098 8.293 2.293C8.098 2.488 8 2.724 8 3L8 4.5C8 4.641 7.952 4.759 7.856 4.856C7.759 4.952 7.641 5 7.5 5L10 5L10 3ZM2.5 8.131C2.584 8.047 2.699 8 2.818 8L7 8L7 6L3 6C2.724 6 2.488 6.098 2.293 6.293C2.098 6.488 2 6.724 2 7L2 8C2.185 8 2.351 8.044 2.5 8.131ZM13 8L13 7C13 6.724 12.902 6.488 12.707 6.293C12.512 6.098 12.276 6 12 6L8 6L8 8L12.182 8C12.301 8 12.416 8.047 12.5 8.131C12.649 8.044 12.815 8 13 8ZM3 14L7 14L7 9L3 9L3 14ZM12 9L8 9L8 14L12 14L12 9Z" />
    </svg>
  );
}

Vue

Vue: see /icons/gift.md

Svelte

Svelte: see /icons/gift.md

HTML img

HTML img: see /icons/gift.md

CSS

CSS: see /icons/gift.md

Data URL

Data URL: see /icons/gift.md

Sprite

Sprite: see /icons/gift.md

SwiftUI

SwiftUI: see /icons/gift.md

Compose

Compose: see /icons/gift.md

Android XML

Android XML: see /icons/gift.md

Flutter

Flutter: see /icons/gift.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

Meaning

Use it for

gift, present, gifting, giveaway

Alternatives

gift-card: a prepaid card or store credit
award: a prize or achievement

Don’t confuse with

package: a parcel or product, not a present

Also fits

birthday: a gift or present

Not for

gift card (use gift-card): a present, not a card with a balance

Tags

present, gift, box, birthday, surprise, reward

Category

Shopping

Component name

GiftIcon

History

2026-10-14 added
2026-10-15 20 px drawn, 24 px drawn

Family 1

gift-check

More shopping icons

barcode cash-register gem handbag hanger package package-alert package-arrow-down package-arrow-right package-arrow-up package-check package-clock package-off package-pencil package-plus package-search · all shopping icons

For agents

Metadata: /icons/gift.json · Markdown: /icons/gift.md · SVG: https://gentleface.com/svg/{style}/16/gift.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/gift.png

gift icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp