Published on May 17, 2019

[Video] How to replace icons in UIKit

Sridhar Katakam

This screencast shows how we can replace the default icons that come with UIKit with custom ones.



Step 1

In a terminal window run

git clone git://

to clone UIKit’s GitHub repository locally.

This will create a uikit folder with all its default content.

Step 2


cd uikit

to go inside the uikit folder.

Step 3



to install the needed dependencies.

Step 4

Create a custom folder inside uikit and inside that, icons folder.

Place your custom svg file for the icon that you want to replace with the name of the icon in the above folder.

Ex.: check.svg

Step 5


yarn compile

to get the updated uikit-icons.min.js file having your new icon(s).

Step 6

Replace the default uikit-icons.min.js on your server with the new one from the above step.

Step 7

Add this CSS:

.uk-icon svg {
width: 20px;
height: 20px;