Note: I take no credit for this answer as it was posted by elementaryosnewbie on Reddit. Thought it'd be best to have this on the Elementary OS Stack Exchange. Big thanks to him for sharing it. If this has already been posted I apologise for the double post.

How it looks: Image 1, Image 2, Image 3

  1. Open file manager up as administrator and go to: /usr/share/themes/name-of-your-theme-folder/gtk-3.0

  2. Place the icon you want to use in that folder.

  3. Make sure the icon has proper permissions by right clicking on it, choosing properties > more > and making it 644-777 (read, write, and executable by owner, group, everyone) or else wingpanel may not load. (Alternatively you could issue chmod 777 <icon name>.svg)

  4. Open up /usr/share/themes/name-of-your-theme-folder/gtk-3.0/apps.css in Scratch, scroll down to the panel settings, find .panel-app-button, and change what's in the {brackets} to what's below. (Default theme: /usr/share/themes/elementary/gtk-3.0 )

    .panel-app-button > GtkWidget > GtkWidget:first-child { padding: 0px 24px 0px 0px; font-size: 0px; background-image: url("icon.svg"); background-repeat: no-repeat; }

  5. Change the background image url to the name of the icon that you placed in the gtk-3.0 folder. The padding above is adjusted for a 24x24 icon but you can adjust it to fit something bigger/smaller/wider, just change "24px" to the width of your image.

  6. In terminal type: killall wingpanel to see the changes.

Some icons you may like

elementary icons:


other icons you may like

  1. - bullseye icon
  2. - apple icon

Search google for more,iszw:24,iszh:24,ic:trans&tbm=isch&cad=h