icons

Example

The keys in the icons object specify the icon size in pixels, and values specify the relative icon file path. This example contains a 32px extension icon and a larger version for high-resolution displays.

"icons": {
  "32": "icon.png",
  "64": "icon@2x.png"
}

SVG

You can use SVG, and the browser scales your icon appropriately. There are two caveats:

1. You need to specify a viewBox in the image, e.g.:

   html

   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 32 32"
     width="32"
     height="32">
     <!-- your svg content -->
   </svg>
   

2. Even though you can use one SVG file, you need to specify icon sizes in your manifest, e.g.:

   json

   "icons": {
     "32": "icon.svg",
     "64": "icon.svg"
   }
   

You can use a media query on prefers-color-scheme to update the icon for light and dark themes. For example:

#outside {
  fill: black;
}
#inside {
  fill: red;
}
@media (prefers-color-scheme: dark) {
  #outside {
    fill: white;
  }
  #inside {
    fill: black;
  }
}

For more information, see the themed-icons example.

Browser compatibility