Complete new redesigned icons as web font for jQuery UI

  • All icons are complete drawn by hand and optimized for a minimal size of 14×14 pixels.
  • Resizable and mobile friendly icons.
  • Change the color of icons without generating graphic files.
  • Works with all jQuery UI 1.11.2, 1.11.3, 1.11.4, 1.12 & 1.12.1 themes and jQuery Mobile 1.4.5.
  • Easy to use, no extra plugins or hacks needed.
  • Included CSS3 animation for e.g. AJAX loading status.

! Since there are now better alternatives and frameworks, I have decided to discontinue this project.

332 Unique icons for jQuery UI / jQuery Mobile

This list shows all available icon names in alphabetical order without the prefix 'ui-icon-'.
a) alias of another; d) deprected

  • action a
  • addon
  • address
  • alert
  • alert-b
  • anchor
  • archive
  • arrow-1-e
  • arrow-1-n
  • arrow-1-ne
  • arrow-1-nw
  • arrow-1-s
  • arrow-1-se
  • arrow-1-sw
  • arrow-1-w
  • arrow-2-e-w
  • arrow-2-n-s
  • arrow-2-ne-sw
  • arrow-2-se-nw
  • arrow-4
  • arrow-4-diag
  • arrow-d a
  • arrow-d-l a
  • arrow-d-r a
  • arrow-l a
  • arrow-r a
  • arrow-u a
  • arrow-u-l a
  • arrow-u-r a
  • arrowrefresh-1-e
  • arrowrefresh-1-n
  • arrowrefresh-1-s
  • arrowrefresh-1-w
  • arrowreturn-1-e
  • arrowreturn-1-n
  • arrowreturn-1-s
  • arrowreturn-1-w
  • arrowreturnthick-1-e
  • arrowreturnthick-1-n
  • arrowreturnthick-1-s
  • arrowreturnthick-1-w
  • arrowstop-1-e
  • arrowstop-1-n
  • arrowstop-1-s
  • arrowstop-1-w
  • arrowthick-1-e
  • arrowthick-1-n
  • arrowthick-1-ne
  • arrowthick-1-nw
  • arrowthick-1-s
  • arrowthick-1-se
  • arrowthick-1-sw
  • arrowthick-1-w
  • arrowthick-2-e-w
  • arrowthick-2-n-s
  • arrowthick-2-ne-sw
  • arrowthick-2-se-nw
  • arrowthickstop-1-e
  • arrowthickstop-1-n
  • arrowthickstop-1-s
  • arrowthickstop-1-w
  • audio a
  • back a
  • bars a
  • battery-0
  • battery-1
  • battery-2
  • battery-3
  • book
  • book-b
  • bookmark
  • bookmark-b
  • box
  • bucket
  • bug
  • bullet
  • bullets a
  • bullhorn
  • calculator
  • calculator-b
  • calendar
  • calendar-b
  • calendar-day
  • camera
  • cancel
  • carat-1-e d
  • carat-1-n d
  • carat-1-s d
  • carat-1-w d
  • carat-2-e d
  • carat-2-e-w d
  • carat-2-n d
  • carat-2-n-s d
  • carat-2-s d
  • carat-2-w d
  • carat-d a
  • carat-l a
  • carat-r a
  • carat-u a
  • caratstop-1-e d
  • caratstop-1-n d
  • caratstop-1-s d
  • caratstop-1-w d
  • caret-1-e
  • caret-1-n
  • caret-1-ne
  • caret-1-nw
  • caret-1-s
  • caret-1-se
  • caret-1-sw
  • caret-1-w
  • caret-2-e
  • caret-2-e-w
  • caret-2-n
  • caret-2-n-s
  • caret-2-s
  • caret-2-w
  • caret-d a
  • caret-l a
  • caret-r a
  • caret-u a
  • caretstop-1-e
  • caretstop-1-n
  • caretstop-1-s
  • caretstop-1-w
  • cart
  • cart-b
  • chart-bars
  • chart-line
  • chart-pie
  • check
  • check-off
  • check-on
  • checkbox a
  • checkbox-checked a
  • checkbox-off a
  • checkbox-on a
  • checkbox-unchecked a
  • circle
  • circle-arrow-e
  • circle-arrow-n
  • circle-arrow-s
  • circle-arrow-w
  • circle-b-arrow-e
  • circle-b-arrow-n
  • circle-b-arrow-s
  • circle-b-arrow-w
  • circle-b-check
  • circle-b-close
  • circle-b-help
  • circle-b-info
  • circle-b-minus
  • circle-b-notice
  • circle-b-plus
  • circle-b-triangle-e
  • circle-b-triangle-n
  • circle-b-triangle-s
  • circle-b-triangle-w
  • circle-check
  • circle-close
  • circle-help
  • circle-info
  • circle-minus
  • circle-notice
  • circle-phone
  • circle-plus
  • circle-triangle-e
  • circle-triangle-n
  • circle-triangle-s
  • circle-triangle-w
  • circle-zoom
  • circle-zoomin
  • circle-zoomout
  • circlesmall-close
  • circlesmall-minus
  • circlesmall-plus
  • client
  • clipboard
  • clock
  • clock-b
  • close
  • closethick
  • cloud
  • cloud-b
  • cloud-download
  • cloud-upload
  • comment
  • comments
  • console
  • contact
  • copy
  • creditcard
  • cut a
  • database
  • databases
  • delete a
  • desktop a
  • disk
  • document
  • document-b
  • download
  • edit a
  • eject
  • email a
  • erase
  • eye
  • feed a
  • file a
  • file-audio
  • file-image a
  • file-movie a
  • file-pdf
  • file-report
  • file-richtext
  • file-script a
  • file-table
  • file-text
  • file-video a
  • file-word
  • file-zip
  • files a
  • flag
  • folder a
  • folder-closed a
  • folder-collapsed
  • folder-open
  • forbidden a
  • forward a
  • fullscreen
  • fullscreen-off
  • fullscreen-on a
  • gear
  • gears
  • globe
  • globe-b
  • grid a
  • grid-b a
  • grip-diagonal-se
  • grip-dotted-horizontal
  • grip-dotted-vertical
  • grip-solid-horizontal
  • grip-solid-vertical
  • gripsmall-diagonal-se
  • group a
  • heart
  • heart-b
  • heart-beat
  • help a
  • help-plain
  • history
  • home
  • image
  • info a
  • info-plain
  • input a
  • jquery
  • key
  • laptop a
  • lightbulb
  • linkext a
  • list a
  • loading-status-balls
  • loading-status-circle
  • loading-status-comet
  • loading-status-lines
  • loading-status-planet
  • location
  • lock a
  • lock-open a
  • locked
  • logoff a
  • logout a
  • mail a
  • mail-attachment
  • mail-closed
  • mail-forward
  • mail-open
  • mail-read a
  • mail-reply
  • mail-replyall
  • mail-send
  • marker
  • menu
  • microphone
  • microphone-off
  • minus
  • minusthick
  • mobile a
  • move a
  • move-h a
  • move-v a
  • movie
  • navigation
  • news a
  • newsletter a
  • newspaper
  • newwin
  • note
  • notice a
  • notice-plain
  • package
  • palette
  • paste a
  • pause
  • pencil
  • person
  • persons
  • phone
  • pilcrow
  • pin-s
  • pin-w
  • play
  • plugin
  • plus
  • plusthick
  • popup a
  • power
  • print
  • print-b
  • print-layout
  • prush
  • puzzle a
  • radio-btn a
  • radio-btn-checked a
  • radio-btn-off a
  • radio-btn-on a
  • radio-btn-unchecked a
  • radio-off a
  • radio-on
  • recycle a
  • redo
  • refresh
  • reload a
  • rename
  • resize-h a
  • resize-v a
  • retweet
  • rss a
  • save a
  • scissors
  • screen-desktop
  • screen-laptop
  • screen-mobile
  • script
  • seek-end a
  • seek-first a
  • seek-next a
  • seek-prev a
  • select
  • selectbox
  • server
  • settings
  • shield
  • shop a
  • shop-b a
  • shuffle
  • shuttle
  • sign-out
  • signal
  • signal-diag
  • sitemap
  • sorting
  • sorting-asc
  • sorting-desc
  • squaresmall-close
  • squaresmall-minus
  • squaresmall-plus
  • star
  • star-b
  • star-h
  • stop
  • structure
  • suitcase
  • switch a
  • table
  • tag
  • tags
  • template
  • ticket
  • toggle-off
  • toggle-on
  • transfer-e-w
  • transferthick-e-w
  • transform
  • translate
  • trash
  • trash-b
  • triangle-1-e
  • triangle-1-e-stop
  • triangle-1-n
  • triangle-1-n-stop
  • triangle-1-ne
  • triangle-1-nw
  • triangle-1-s
  • triangle-1-s-stop
  • triangle-1-se
  • triangle-1-sw
  • triangle-1-w
  • triangle-1-w-stop
  • triangle-2-e
  • triangle-2-e-w
  • triangle-2-n-s
  • triangle-2-w
  • truck
  • undo
  • unlocked
  • upload
  • user a
  • users a
  • vcard a
  • vcs-branch
  • vcs-compare
  • vcs-fork
  • vcs-merge
  • vcs-pull-request
  • video
  • view-icons
  • view-icons-b
  • view-list
  • volume-high a
  • volume-low a
  • volume-mute a
  • volume-off
  • volume-on
  • volume-on-b
  • window
  • window-close
  • window-minimize
  • window-sidebar
  • windows a
  • wrench
  • zoom
  • zoomequal
  • zoomin
  • zoomout

Usage

Include the Icon Font

Copy the file "jquery-ui-1.12.icon-font.min.css" or "jquery-ui-1.11.icon-font.min.css" and the folder "font" into your folder, which holds your CSS-files.
You can also rename e.g. jquery-ui-1.12.icon-font.min.css to jquery-ui.icon-font.min.css. For debugging and/or develope you may use CSS-files without ".min" (e.g. jquery-ui-1.12.icon-font.css).

Add in the <head>-section of your html document a link to the new CSS-file

For jQuery Mobile it doesn't matter wich file is used, but only jquery-ui-1.11.icon-font is fully tested.

Example for jQuery-UI 1.12.x:


<head>
  <!-- … -->
  <link rel="stylesheet" type="text/css"
    href="css/theme/jquery-ui.min.css" />
  <!-- ui version 1.12.x -->
  <link rel="stylesheet" type="text/css"
    href="css/theme/jquery-ui-1.12.icon-font.min.css" />
  <script type="text/javascript"
    src="js/jquery.min.js"></script>
  <script type="text/javascript"
    src="js/jquery-ui.min.js"></script>
  <!-- … -->
</head>

Example for jQuery-UI 1.11.x or jQuery Mobile:


<head>
  <!-- … -->
  <link rel="stylesheet" type="text/css"
    href="css/theme/jquery-ui.min.css" />
  <!-- ui version 1.11.x -->
  <link rel="stylesheet" type="text/css"
    href="css/theme/jquery-ui-1.11.icon-font.min.css" />
  <script type="text/javascript"
    src="js/jquery.min.js"></script>
  <script type="text/javascript"
    src="js/jquery-ui.min.js"></script>
  <!-- … -->
</head>

How to use an icon in HTML-markup

To display an icon is really simple:

Example Code


  <p class="ui-widget-content
    ui-state-default ui-helper-clearfix">
    <span style="float: left; margin-right: 0.5em;"
      class="ui-icon ui-icon-jquery">icon</span>
    ui-icon-jquery
  </p>

Example Result

icon ui-icon-jquery

In the section Demos are some more examples.

Supported jQuery UI

Current supported jQuery UI Version: 1.11.2, 1.11.3, 1.11.4, 1.12 & 1.12.1;
supported jQuery Mobile 1.4.5

Supported Browser

All current major browsers should be supported. If you are using a browser, which is not supported, except InternetExplorer (see below), please give me feedback.

Please note:
InternetExplorer below version 8 is not supported and InternetExplorer version 8 may not display some elements correct, due limitation of CSS3 properties. All versions of InternetExplorer below 10 can not display CSS3 animation.

Further information about browser support:
» jQuery Core
» jQuery UI
» jQuery Mobile

Demos

This demonstrates widgets and themes with the new icons.

Please note:
Make sure you are using them with a compatible jQuery version.
This demo uses jQuery 3.1.1 and jQuery UI 1.12.1.

This demo perhabs may not work with InternetExplorer versions < 10, due the limitations of jQuery and jQuery UI support.

Accordion

First

This is the content of the first accordion.

Second

This is the content of the second accordion.

Third

This is the content of the third accordion.

Buttons


Checkboxes (with Icons)

Checkboxes (without Icons)

Radio Buttons (with Icons)

Radio Buttons (without Icons)

Controlgroup (horizontal)

Controlgroup (vertical)

Dialog

jQuery UI Dialog

This is only a demo without any callback on close.

Datepicker

Menu

  • Item 1
  • Item 2
    • Item 2-1
    • Item 2-2
      • Item 2-2-1
      • Item 2-2-2
      • Item 2-2-3
    • Item 2-3
  • Item 3

Highlight / Error

Hey! Sample »ui-state-highlight« style.
Alert: Sample »ui-state-error« style.
Message:
Sample »ui-state-default« style with large icon.