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
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 -
xing default -
world default internet, global
wordpress default -
whatsapp default -
warning default exclamation
vimeo default -
video-camera default film, movie
users default -
user default -
upload default -
unlock default secure
uikit default -
twitter 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
reddit default -
receiver default phone, call
quote-right default -
question default help
push default -
pull default -
print default -
plus default addition
plus-circle default addition
play default -
play-circle default -
pinterest 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 -
mail default envelope
lock default secure
location default gps, coordinates
list default bullet points
linkedin default -
link default chain
lifesaver default -
laptop default notebook
joomla default -
italic default text, font
instagram 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
google 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 -
facebook 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 -

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