Icon

Overview

Icons represent an important tool for how people wayfind throughout experiences. They symbolize common actions, objects, places or states.

They're designed to be simple, clean, friendly, and sometimes quirky. Each icon is reduced to its minimal form, expressing only the essential characteristics. Their shapes are strong, stroke based and have a symmetrical and consistent look, ensuring readability and clarity, even at small sizes.

Interactive demo

The demo below allows you to preview the component. You can play with its props, variations, configuration options and dive into its events and even see them trigger in the event log tab.

MedKit Icon

Props Help

For each property in a component you can see:

• value-type
  that it supports
• The default
  value
• If the prop is
  required

Icon

Icon

type Icon = typeof icons[number];

Required

The icon to display.

 

alertarrow-downarrow-leftarrow-rightarrow-upbellcalendarchartchevron-downchevron-leftchevron-rightchevron-upcircle-outlinecircle-solidclockcopycross-smallcrossdeletedevicedownloadediteditoreye-openeye-slashexternalfiltergrid-dots-verticalgrid-fullgrid-half-horizontalgrid-half-verticalgrid-one-by-twogrid-two-by-twohaltheart-rateinfolaunchlinkloadinglockloginlogoutlungsmailmenuminusmorenotificationphonepluspreferencesprofilequestionreceiptredorefreshreloadsearchsettingssign-postsorting-ascsorting-descsupporttemperaturetickundouploaduserusers

Render As

string

span

The DOM element to render the icon inside.

 

Size

IconSize

type IconSize = typeof iconSizes[number];

medium

The size of the icon.

 

mediumlarge

Colour

The icon will automatically take on the colour of the text where it is displayed.

<template>
  <div class="mk-bg-blurple mk-p-4">
    <MedKitIcon class="mk-text-white" icon="edit" />
  </div>
</template>

Examples

Name

medium

large

alert

arrow-down

arrow-left

arrow-right

arrow-up

bell

calendar

chart

chevron-down

chevron-left

chevron-right

chevron-up

circle-outline

circle-solid

clock

copy

cross-small

cross

delete

device

download

edit

editor

eye-open

eye-slash

external

filter

grid-dots-vertical

grid-full

grid-half-horizontal

grid-half-vertical

grid-one-by-two

grid-two-by-two

halt

heart-rate

info

launch

link

loading

lock

login

logout

lungs

mail

menu

minus

more

notification

phone

plus

preferences

profile

question

receipt

redo

refresh

reload

search

settings

sign-post

sorting-asc

sorting-desc

support

temperature

tick

undo

upload

user

users

Figma Library

You can find the component in our MedKit Figma library.