A really quick question...
Is there any setting that can change the size of the default Joomla 3 icons? I know I can upload bigger pictures, but it is quite tedious.

Anyone knows how to achieve that in a faster automatic way?

thank you

  • Which icons are you referring to?
    – Lodder
    Commented Oct 16, 2015 at 15:44
  • Default icons - like print, edit, email. They come with standard joomla 3 installation.
    – aretai
    Commented Oct 16, 2015 at 16:57
  • You can either edit the CSS file for the template, or edit the layout
    – Lodder
    Commented Oct 16, 2015 at 17:13
  • I tried to find these values in css files for the template, but failed, which place in the layout should I change to increase their size?
    – aretai
    Commented Oct 16, 2015 at 18:04

1 Answer 1


There are two types of icons:

  1. Images (legacy icons)
  2. CSS class

Two templates that come with Joomla 3.x can be used as a good example of this, beez3 uses images, and protostar uses CSS classes. By the way default way is CSS class, so this is the simplest way to do it:

.icon-print, .icon-envelope{
    font-size: 24px;

And you've got yourself some really big icons. Also reading this will help you to understand how you override Joomla components and modules: https://docs.joomla.org/Understanding_Output_Overrides

  • Thank you for answer. I tried to add the code to template.css via template manager, but icons still appear same size (using beez3). In that case do I need to upload bigger icons after all (since beez3 uses images)? Thank you
    – aretai
    Commented Oct 17, 2015 at 2:55
  • 1
    You've misunderstood me, if you are using beez3 than the icons are PNGs so you can't make them larger by CSS (well maybe you can stretch them but that's not the best way to do it) Go to: templates/beez3/html/com_content/article/default.php In there you will find code that sets how icons are shown: echo JHtml::_('icon.print_popup', $this->item, $params, array(), true); Replace true with false and you will have CSS icons which are much easier to manipulate.
    – Alexxandar
    Commented Oct 17, 2015 at 8:39
  • I tried to do the way you suggested. Where do I need to add the css code you suggested? I've tried in template.css but doesn't work
    – aretai
    Commented Oct 18, 2015 at 22:07
  • Consider using Firebug to determine if your styling is applied, and if something might be overriding it.
    – Alexxandar
    Commented Oct 19, 2015 at 5:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.