This is WCKD

WCKD UI

WCKD UI • v1.0.0 • This work is available for use under MIT license, and while you are free to use it, we kindly request acknowledgment in your project or documentation.

SVG Icons

Each icon is created using a 24x24 grid to provide simplicity, uniformity, and enhanced readability for your website.

search

WCKD UI ICONS

alert

This is an alpha pre-release and should only be used for testing purposes. DO NOT use this in a production environment, yet!

1. Install

Copy into your project directory and add the and files in your webpage. Additionally, update the file path to the .svg in the .js file.

                    
                      <!DOCTYPE html>
                      <html lang="en">
                        <head>
                          <meta charset="UTF-8">
                          <meta name="viewport" content="width=device-width, initial-scale=1.0">
                          <title>Your Page</title>
                          <link href="path/to/dist/wckd-ui.css" rel="stylesheet">
                        </head>
                        <body>
                          <!-- Your page content -->
                          <script src="path/to/dist/wckd-ui.js"></script>              
                        </body>
                      </html>

2. Use

To use these icons simply copy the name for the icon and inline it directly into your HTML

Customize

heart

Customize the icons using CSS

Rotate

arrow arrow arrow
arrow heart arrow
arrow arrow arrow

By utilizing CSS rotate for similar symbols, we eliminate the need for duplications.

  • wckd

    wckd

  • alert

    alert

  • align-middle

    align-middle

  • arrow

    arrow

  • arrow-back

    arrow-back

  • basket

    basket

  • beaker

    beaker

  • book

    book

  • cap

    cap

  • chevron

    chevron

  • chevron-up-down

    chevron-up-down

  • circle

    circle

  • clock

    clock

  • cog

    cog

  • coffee

    coffee

  • compass

    compass

  • comet

    comet

  • code

    code

  • diamond

    diamond

  • dice

    dice

  • digital

    digital

  • download

    download

  • eye

    eye

  • eye-closed

    eye-closed

  • enlarge

    enlarge

  • folder

    folder

  • reduce

    reduce

  • envelop

    envelop

  • external-link

    external-link

  • filter

    filter

  • fingerprint

    fingerprint

  • gift

    gift

  • grid

    grid

  • heart

    heart

  • pulse

    pulse

  • help-circle

    help-circle

  • home

    home

  • identification

    identification

  • image

    image

  • information

    information

  • knight

    knight

  • link

    link

  • megaphone

    megaphone

  • moon

    moon

  • notes

    notes

  • pin

    pin

  • phone

    phone

  • pizza

    pizza

  • plane

    plane

  • power

    power

  • refresh

    refresh

  • search

    search

  • share

    share

  • sidebar

    sidebar

  • star

    star

  • tag

    tag

  • thumb-up

    thumb-up

  • thumb-down

    thumb-down

  • toggle-on

    toggle-on

  • toggle-off

    toggle-off

  • toolbox

    toolbox

  • ui

    ui

  • user

    user

  • venn

    venn

  • x-mark

    x-mark

  • x-circle

    x-circle

  • facebook

    facebook

  • instagram

    instagram

  • youtube

    youtube

  • linkedin

    linkedin

  • pinterest

    pinterest

  • tiktok

    tiktok

  • whatsapp

    whatsapp

  • messenger

    messenger

  • css

    css

  • html

    html