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

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: