npm install uikit-icons-extended
import UKExtendedIcons from 'uikit-icons-extended/dist/js/uk-extended.min.js';
UIkit.use(UKExtendedIcons);
<script src="path/to/uk-extended.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit-icons-extended@1/dist/js/uk-extended.min.js"></script>
The SRI hashes can be found on JSDELIVR.
Icon | Name | Extended | Synonyms | Code |
---|---|---|---|---|
battery-full | extended | power, charge | ||
battery-half | extended | power, charge | ||
battery-low | extended | power, charge | ||
battery | extended | power, charge | ||
bluetooth | extended | - | ||
bug | extended | insect, vermin | ||
chart-bar | extended | data | ||
chart-line | extended | data | ||
chart-pie | extended | data | ||
cloud | extended | - | ||
copy-clipboard | extended | - | ||
dashboard | extended | data, display | ||
eye-closed | extended | hide | ||
eye | extended | show, display | ||
filter | extended | - | ||
folder-open | extended | directory | ||
folders | extended | directory | ||
fullscreen | extended | expand | ||
gitlab | extended | - | ||
incognito | extended | impersonate, shadowing | ||
npm | extended | - | ||
save | extended | floppy | ||
sort-ascending | extended | - | ||
sort-descending | extended | - | ||
terminal | extended | command line | ||
usb | extended | - | ||
windowed | extended | shrink | ||
youtube | default | - | ||
yootheme | default | - | ||
yelp | default | - | ||
default | - | |||
world | default | internet, global | ||
wordpress | default | - | ||
default | - | |||
warning | default | exclamation | ||
vimeo | default | - | ||
video-camera | default | film, movie | ||
users | default | - | ||
user | default | - | ||
upload | default | - | ||
unlock | default | secure | ||
uikit | default | - | ||
default | - | |||
twitch | default | - | ||
tv | default | screen, display, monitor | ||
tumblr | default | - | ||
tripadvisor | default | - | ||
triangle-up | default | caret | ||
triangle-right | default | caret | ||
triangle-left | default | caret | ||
triangle-down | default | caret | ||
trash | default | empty, remove, delete | ||
tiktok | default | - | ||
thumbnails | default | - | ||
tag | default | - | ||
tablet | default | smart | ||
tablet-landscape | default | smart | ||
table | default | - | ||
strikethrough | default | text, font | ||
star | default | rating | ||
soundcloud | default | - | ||
social | default | share | ||
sign-out | default | log out | ||
sign-in | default | log in | ||
shrink | default | - | ||
settings | default | options | ||
server | default | rack | ||
search | default | magnifying glass | ||
rss | default | feed | ||
reply | default | - | ||
refresh | default | update, reload | ||
default | - | |||
receiver | default | phone, call | ||
quote-right | default | - | ||
question | default | help | ||
push | default | - | ||
pull | default | - | ||
default | - | |||
plus | default | addition | ||
plus-circle | default | addition | ||
play | default | - | ||
play-circle | default | - | ||
default | - | |||
phone | default | smart | ||
phone-landscape | default | smart | ||
pencil | default | edit | ||
paint-bucket | default | fill, color | ||
pagekit | default | - | ||
nut | default | - | ||
move | default | drag | ||
more | default | options | ||
more-vertical | default | options | ||
minus | default | subtraction | ||
minus-circle | default | subtraction | ||
microsoft | default | - | ||
microphone | default | voice, record | ||
menu | default | hamburger | ||
mastodon | default | - | ||
default | envelope | |||
lock | default | secure | ||
location | default | gps, coordinates | ||
list | default | bullet points | ||
default | - | |||
link | default | chain | ||
lifesaver | default | - | ||
laptop | default | notebook | ||
joomla | default | - | ||
italic | default | text, font | ||
default | - | |||
info | default | - | ||
image | default | photo | ||
home | default | house | ||
history | default | backwards | ||
heart | default | love | ||
hashtag | default | octothorpe, number sign | ||
happy | default | smile, smiley | ||
grid | default | menu, applications | ||
default | - | |||
gitter | default | - | ||
github | default | - | ||
github-alt | default | - | ||
git-fork | default | - | ||
git-branch | default | - | ||
future | default | forward | ||
foursquare | default | - | ||
forward | default | - | ||
folder | default | directory | ||
flickr | default | - | ||
file | default | - | ||
file-text | default | - | ||
file-pdf | default | - | ||
file-edit | default | - | ||
default | - | |||
eye | default | show, display | ||
eye-slash | default | - | ||
expand | default | fullscreen | ||
etsy | default | - | ||
dribbble | default | - | ||
download | default | - | ||
discord | default | - | ||
desktop | default | pc, monitor | ||
database | default | db, storage | ||
crosshairs | default | - | ||
credit-card | default | payment, money | ||
copy | default | clone | ||
comments | default | messages, dialogs | ||
commenting | default | messaging, writing | ||
comment | default | message, dialog | ||
cog | default | options, settings | ||
code | default | html, tag | ||
cloud-upload | default | - | ||
cloud-download | default | - | ||
close | default | cross, times | ||
clock | default | time | ||
chevron-up | default | - | ||
chevron-right | default | - | ||
chevron-left | default | - | ||
chevron-down | default | - | ||
chevron-double-right | default | - | ||
chevron-double-left | default | - | ||
check | default | success | ||
cart | default | shop | ||
camera | default | photo | ||
calendar | default | - | ||
bookmark | default | - | ||
bolt | default | flash, lightning | ||
bold | default | text, font | ||
bell | default | - | ||
behance | default | - | ||
ban | default | stop | ||
bag | default | - | ||
arrow-up | default | - | ||
arrow-right | default | - | ||
arrow-left | default | - | ||
arrow-down | default | - | ||
apple | default | - | ||
android | default | - | ||
android-robot | default | - | ||
album | default | photo | ||
500px | default | - |
At company I work for we really enjoy using UIkit framework. However there are few things missing such as more advanced input components (datetime picker, select with groups and search etc.) and lack of icons. Yes we can choose different icons set but we like UIkit simplicity and usage. Therefore I created simple tool for extending icons and started adding more custom icons. Shortly after that I realize more developers and designers could benefit from this extension. And here we are. Enjoy!
Lack of icons in default UIkit icons set.
I use Figma for designing the icons. After that I use few npm packages to modify the created svg code. You can browse through scripts in project's repository.