Uihub

Appearance

Icons ​

Usage ​

See design usage guidelines

An Icon is a symbol or image meant to represent an idea, concept, or object, known for their simplicity and ability to be recognized easily.

Installation ​

CDN ​

To use uihub icons include these links in your html file

html
<link rel="stylesheet" href="https://cdn.greyparrot.io/uihub-icons/uihub-icons.min.css">
<script src="https://cdn.greyparrot.io/uihub-icons/uihub-icons.umd.js"></script>

Download source file ​

Download the uihub-icons pack into your public or assets directory


└── project_root
    └── assets
        ├── .
        ├── ..
        └── uihub-icons
            ├── solid
            |   └── ar-vr/ar-vr.umd.js
            |   └── essentials/essentials.umd.js
            |   └── ...
            └── outlined
            |   └── things/things.min.js
            |   └── ...
            └── uihub-icons.min.css
            └── uihub-icons.umd.js

Initialisation ​

Browser environment ​

Initialise by calling initUIcons() after loading the uihub-icons.umd.js script

html
<script>
    document.addEventListener("DOMContentLoaded", () => {
        initUIcons()
    })
</script>

Node environment ​

js
// Do this in a Lifecycle hook. e.g when DOM / component is initialised / mounted
await import("../uihub-icons.umd.js").then(() => {
    initUIcons()
})

Examples ​

Use an icon by the class u-icon and the icon you want. e.g user

user

html
<span class="u-icon">user</span>

You also have a pool of sizes to try out u-icon-16, u-icon-24, u-icon-32, u-icon-48, u-icon-64

useruseruseruseruser

html
<span class="u-icon u-icon-16">user</span>
<span class="u-icon u-icon-24">user</span>
<span class="u-icon u-icon-32">user</span>
<span class="u-icon u-icon-48">user</span>
<span class="u-icon u-icon-64">user</span>

Usage Guidelines ​