Change All Icons to Custom Icons

I just joined Nextcloud and I really want to customize the icons to use the Phosphor library instead, but I’m having trouble figuring it out. I’m fairly beginner when it comes to coding, but pretty good at learning and appreciate any ideas.

I’ve looked through the documentation that Phosphor has on Github and they have multiple options for setting up the icons, but I’m not sure if any of them can work on Nextcloud.

Here’s a link to the Phosphor library.

OK. Let me explain:

You have to create an own “theme”, lets call it “myicons” inside of the themes folder in the root of your nextcloud.

Inside you find a README that explains exactly how it works:

Themes can be used to customize the look and feel without the need to patch the source code. This makes it very easy to:

  • Use your own logo (in the top left, in log in and in emails)
  • Customize the text strings to replace »Nextcloud« etc. with your name of choice
  • Change the main color (used in header and as log in background)
  • And more …

The process is simple:

  1. Put a folder here with the name of the theme as foldername
  2. Activate it by putting ‘theme’ => ‘themename’, into the config.php file

The folder structure of a theme is exactly the same as the main structure. CSS files are loaded additionally to the default files so you can override properties. Images are replaced. You can also override JS files and PHP templates but we do not recommend that because you will need to adjust them after every update.

You can also find a basic example here which you can build upon.

You have to re create the complete directory structure with all the original icons, namely from core/img/ inside of themes/myicons

So that it loosk like this:

themes/myicons/core/img/(etc)

Now you can put any icon here and as long as it has exactly the same name as in the original core/image/… it will get precedence over the original icons.

To get the whole thing up and working, you must add this to your config/config.php:

  'theme' => 'myicons',

If it does not work imediately, you may have to run

occ maintenance:theme:update

and or reload the browser cache.

I use custom icons myself, so I can confirm it works :wink:


Much and good luck,
ernolf

1 Like

That’s so cool to hear that you have this working for yourself! Thanks for sharing so many details, it really means a lot to me.