NexDocs logoNexDocs

Custom Icons - Opera GX Mods

Guide to managing and using icons within your mod, including setting up custom icons.

Customize the sidebar and UI icons in Opera GX to match your mod's theme!

🔧 Adding Custom Icons

Follow these steps to add custom icons to your mod.

Prepare Icon Files

  • Create a folder called icons in your mod directory.
  • Store your icon files inside the icons/ folder.
  • Use .json files for vector icons, this image-based icons not support .png / .webp.
my-first-mod
  • manifest.json
  • icons/
    • sidebar_bookmarks_button.json
    • sidebar_gx_booster_button.json
    • sidebar_limiters_button.json
    • sidebar_mods_button.json
    • sidebar_settings_button.json
    • sidebar_shaders_button.json

Update manifest.json

Define image overrides in your mod’s payload:

manifest.json 
{
  "image_overrides": [
    {
      "id": "image_overrides_01",
      "name": "Nex Sci-Fi",
      "images": {
        "sidebar_bookmarks_button": "icons/sidebar_bookmarks_button.json",
        "sidebar_gx_booster_button": "icons/sidebar_gx_booster_button.json",
        "sidebar_limiters_button": "icons/sidebar_limiters_button.json",
        "sidebar_mods_button": "icons/sidebar_mods_button.json",
        "sidebar_settings_button": "icons/sidebar_settings_button.json",
        "sidebar_shaders_button": "icons/sidebar_shaders_button.json"
      }
    }
  ]
}

🎨 Best Practices

  • Use SVG-based .json files for crisp and scalable icons.
  • Maintain consistent sizes for uniform UI appearance.
  • Ensure visibility in both light and dark modes.
  • Optimize file size to prevent performance issues.
Edit this page
Stickers - Opera GX Mods
How to add stickers to enhance the visual experience of your mod.
Splash Screen - Opera GX Mods
Learn how to customize the splash screen that appears when Opera GX loads your mod.