Extend your UIkit icons library

Installation

NPM

npm install uikit-icons-extended

TypeScript import

import UKExtendedIcons from 'uikit-icons-extended/dist/js/uk-extended.min.js';
UIkit.use(UKExtendedIcons);

Download file directly

<script src="path/to/uk-extended.min.js"></script>

Use CDN

<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.

Icons

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
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
500px default -
album default photo
arrow-down default -
arrow-left default -
arrow-right default -
arrow-up default -
ban default stop
behance default -
bell default -
bold default text, font
bolt default flash, lightning
bookmark default -
calendar default -
camera default photo
cart default shop
check default success
chevron-double-left default -
chevron-double-right default -
chevron-down default -
chevron-left default -
chevron-right default -
chevron-up default -
clock default time
close default cross, times
cloud-download default -
cloud-upload default -
code default html, tag
cog default options, settings
comment default message, dialog
commenting default messaging, writing
comments default messages, dialogs
copy default clone
credit-card default payment, money
database default db, storage
desktop default pc, monitor
download default -
dribbble default -
etsy default -
expand default fullscreen
facebook default -
file-edit default -
file-pdf default -
file-text default -
file default -
flickr default -
folder default directory
forward default -
foursquare default -
future default forward
git-branch default -
git-fork default -
github-alt default -
github default -
gitter default -
google-plus default -
google default -
grid default menu, applications
happy default smile, smiley
hashtag default octothorpe, number sign
heart default love
history default backwards
home default house
image default photo
info default -
instagram default -
italic default text, font
joomla default -
laptop default notebook
lifesaver default -
link default chain
linkedin default -
list default bullet points
location default gps, coordinates
lock default secure
mail default envelope
menu default hamburger
microphone default voice, record
minus-circle default subtraction
minus default subtraction
more-vertical default options
more default options
move default drag
nut default -
pagekit default -
paint-bucket default fill, color
pencil default edit
phone-landscape default smart
phone default smart
pinterest default -
play-circle default -
play default -
plus-circle default addition
plus default addition
print default -
pull default -
push default -
question default help
quote-right default -
receiver default phone, call
reddit default -
refresh default update, reload
reply default -
rss default feed
search default magnifying glass
server default rack
settings default options
shrink default -
sign-in default log in
sign-out default log out
social default share
soundcloud default -
star default rating
strikethrough default text, font
table default -
tablet-landscape default smart
tablet default smart
tag default -
thumbnails default -
trash default empty, remove, delete
triangle-down default caret
triangle-left default caret
triangle-right default caret
triangle-up default caret
tripadvisor default -
tumblr default -
tv default screen, display, monitor
twitter default -
uikit default -
unlock default secure
upload default -
user default -
users default -
video-camera default film, movie
vimeo default -
warning default exclamation
whatsapp default -
wordpress default -
world default internet, global
xing default -
yelp default -
youtube default -

About

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!

What problem does it solve?

Lack of icons in default UIkit icons set.

How are icons created?

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.

made with by hajnyon