[Video] How to replace icons in UIKit

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

Before:

After:

Step 1

In a terminal window run

git clone git://github.com/uikit/uikit.git

to clone UIKit’s GitHub repository locally.

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

Step 2

Run

cd uikit

to go inside the uikit folder.

Step 3

Run

yarn

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

Run

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;
}

References

https://getuikit.com/docs/icon

https://getuikit.com/docs/installation#compile-from-github-source

https://getuikit.com/docs/custom-icons