Take the 2-minute tour ×

Is it possible to create a jQueryUI Button with a custom icon, ie: an icon that is not part of the sprite icons that are provided with jQueryUI???

I am using the ButtonSet functionality for a group of 3 checkboxes but need a more stylised icon than what is provided out of the box...

share|improve this question

2 Answers 2

up vote 9 down vote accepted

Worked it out with a CSS hack.

Setup the button as per normal and give the primary icon the "Error" class defined below

    background-image: url('Images/Icons/16/Error.png') !important;

The !important overrides the ui-icon definition for background-image.

share|improve this answer
well thats not a hack, it's just an nice override- –  chrismarx Dec 3 '10 at 13:15
Exactly what I needed, thanks! –  user571326 Jan 11 '11 at 18:25
!important is hack-ish I'd say. Definitely not something to rely on heavily. In cases like this it's probably fine. –  Derek Adair Sep 19 '11 at 19:13

I took this approach for one of my buttons and I discovered some interesting things:

  1. I didn't need to use the "!important" override
  2. I needed to set background-position for my button (otherwise I think the background was being displayed well outside the button)
  3. It looks like you can also put anything you like in the jQueryUI primary icon name - it just needs something as a placeholder.

For my uses I ended up with:


jQuery(function() {
        icons: { primary: "icons/share" }



#share-button > span.ui-icon {
    background-image: url(icons/share.png);
    background-position:0px 3px;}


<button id='share-button'>Share</button>
share|improve this answer
This worked for me. –  chowwy May 1 '12 at 17:56

Your Answer


