How to Use Base64 Images in CSS

Using a Base64 image in CSS lets you embed small icons and patterns directly in stylesheets without extra HTTP requests. The syntax uses a data URI inside background-image.

background-image with data URI

Wrap the data URI in quotes inside the url() function.

.icon-check {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNicgaGVpZ2h0PScxNic+PHBhdGggZD0nTTIgOGw0IDQgOC04JyBmaWxsPSdub25lJyBzdHJva2U9JyMwMDcnIHN0cm9rZS13aWR0aD0nMicvPjwvc3ZnPg==");
  background-size: contain;
  background-repeat: no-repeat;
}

Get CSS output from the encoder

Upload your image on our Image to Base64 page and switch to the CSS tab. Copy the full background-image: url("...") property ready to paste into your stylesheet.

SVG vs PNG in CSS

SVG icons encoded as Base64 are ideal for CSS — they stay sharp at any size and are often smaller than PNG.

For photographic backgrounds, avoid Base64 in CSS. Use external image files instead.

If your data URI contains special characters, ensure it is properly quoted in the url() value.