Icon Font for jQuery-UI

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
extlink
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
link
link-broken
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
login ^a
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
search
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-in
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

Dialog

jQuery UI Dialog

This is only a demo without any callback on close.

Datepicker

Highlight / Error

Hey! Sample »ui-state-highlight« style.

Alert: Sample »ui-state-error« style.

Message:
Sample »ui-state-default« style with large icon.

Icon Font for jQuery UI

Complete new redesigned icons as web font for jQuery UI

332 Unique icons for jQuery UI / jQuery Mobile

Usage

Include the Icon Font

Example for jQuery-UI 1.12.x:

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

How to use an icon in HTML-markup

Example Code

Example Result

Supported jQuery UI

Supported Browser

Demos

Accordion

First

Second

Third

Buttons

Checkboxes (with Icons)

Checkboxes (without Icons)

Radio Buttons (with Icons)

Radio Buttons (without Icons)

Controlgroup (horizontal)

Controlgroup (vertical)

Dialog

Datepicker

Selectmenu

Spinner

Menu

Highlight / Error

Downloads

Develop