Base64 in CSS background-image

Example

.icon-search {
  width: 16px;
  height: 16px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAK...");
  background-repeat: no-repeat;
  background-size: contain;
}

/* multiple layers: inline icon on top of a gradient */
.badge {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAK..."), linear-gradient(#fff, #eee);
}

Live demo

Notes

• Always quote the data URI inside url(): SVG data in particular may contain characters that break unquoted URLs.
• Inline only small images (icons, patterns). Each inlined image increases the CSS size by ~33% of the image size and blocks rendering until the CSS loads.
• Data URIs in CSS are cached together with the stylesheet, so they are a good fit for icons used on many pages.

Other CSS properties

• background
• border-image
• cursor
• list-style-image
• list-style