How to replace Activities word with any image in Gnome Shell

For this tutorial I will use Gnome Shell 3.4 and its default theme, but this will work also on 3.2 and pretty much on any theme that doesn’t already use an
image for Activities. You will need user-theme extension, gnome-tweak-tool, an image and of course GNOME 3.2+.



First we copy default shell theme to our local themes folder.
Shell theme lies on


and we copy these files to


We run gnome-tweak-tool and we choose “mydefault” theme. Then we open gnome-shell.css inside. ~/.themes/mydefault/gnome-shell/

On line ~331 we will find the css responsible for the panel. We modify it to look like this:


/* Panel */

#panelActivities {
border: none;
background-image: url("gnome.png");
background-position: 5px 4px;
width: 63px;
height: 24px;
color: rgba(0,0,0,0.0);

#panelActivities:hover {
transition-duration: 300;
background-image:  url("gnome.png");

#panelActivities:overview {
background-image:  url("gnome.png");

#panel {
    background-color: black;
    font-weight: bold;
    height: 1.86em;


gnome.png is our example image (you can replace it with whatever) and you should put it inside gnome-shell directory.

If you will use another image don’t forget to change the dimensions on


width: 63px;
height: 24px;

to match your image dimensions. If you need to adjust the height of the panel change the

#panel {
 height: 1.86em;

As you see above, we can use 3 different images for the 3 different states
of shell activities.

That’s all, Hit



Well quite simple :)

  • Sicofante

    You create a tutorial for something and don’t show the end result????

  • Alexis Diavatis

    Sorry, was some mistake on publish, I will re-edit it first chance

  • MrChrisDruif

    With the switch to an icon (I’ve chosen the distributor-logo) I’ve noticed that the underlining is not filling onto the window panel. What sections should I need to edit, because I don’t want to completely break it. I’ll keep trying thou.

  • Alexis Diavatis

    on line 387 comment the corner-border, that removes the white underline of the corner
    .panel-corner:active,.panel-corner:overview,.panel-corner:focus {    /*-panel-corner-border-color: rgba(255,255,255,0.8);*/}

    on panel activities add border-image: none; that removes the underline of the logo
    #panelActivities:active,#panelActivities:overview {background-image:  url(“gnome.png”);border-image:none;}

  • Alexis Diavatis

    line number could be wrong as you have added extra code, so just find the properties :)

  • Alexis Diavatis

    And also if you want to keep the underline to fill the logo width, increase the width. If your logo is 63px as the example, make it 69px, because you place it 5 pixel right.. 

  • Ángel Manuel Leal Contreras

    Thanks you, that worked.