Icon

Install and import individual icons

yarn add @welcome-ui/icons.avatar @xstyled/styled-components @xstyled/system react react-dom styled-components
import { AvatarIcon } from '@welcome-ui/icons.avatar'

Or… install and import all icons

yarn add @welcome-ui/icons @xstyled/styled-components @xstyled/system react react-dom styled-components
import * as Icons from '@welcome-ui/icons'

Size

Use size property with xxs, xs, sm, md, lg, xl, a string 35px or a number 50 that will convert the value into rem

Colour

Icons inherit the colour from their parent.

Available icons

Note: You can click on an icon to copy its name.

Directions

Left
Right
Up
Down

Actions

Activity
Add
Archive
Bulk
Check
Collapse
Cross
DragAndDrop
Edit
Eye
ExpandText
Expand
ExternalLink
Filters
Get
Heart
HeartOutline
Information
Link
LogOut
Menu
More
Notification
Pin
Play
PlayOutline
Print
Promote
RefuseCandidate
Remote
Reset
Search
Settings
Trash
Upload
Video
Write

Appreciations

Negative
Positive
NegativeOutline
PositiveOutline
NegativeStraight
PositiveStraight

Categories

Actions
CoverLetter
Details
Resume
Questions

Miscellaneous

Address
Alert
Anniversary
Attachment
Avatar
Birthday
CandidateStatus
Celebrate
Clock
CommentOutline
Comment
Contract
Create
Date
Department
Earth
EducationLevel
EmailOutline
Email
Female
Fingerprint
Folder
Information
Location
Male
Mansanory
OfferStatus
Origine
PhoneOutline
Phone
Pictures
Podcast
Question
ReviewOutline
Review
Salary
Source
Star
Suitcase
Tag
Tags
Teepee
Update

Files

Csv
Doc
Docx
Eot
Gif
Jpeg
Jpg
Pdf
Png
Svg
Ttf
Txt
Woff
Woff2
Xls
Xlsx
Zip

WTF

Basketball
Book
Bulb
Caddy
Calcul
Camera
Chevron
Coffee
Compass
Computer
CrossTarget
Crown
Diamond
Dish
Factory
Flag
FlagPointed
Gear
Handshake
HardHat
Hashtag
HeartShiny
House
Lock
LockRounded
Map
Megaphone
Mic
Microship
Money
Mountain
Music
Paperplane
Pencil
Piechart
Pizza
Refresh
Shield
Spanner
Stackserver
Sun
Target
Thumbup
Tree

Markdown

Bold
Code
Heading1
Heading2
Italic
Link
UnorderedList
OrderedList
Quote
Strikethrough

Social networks

Behance
Dribbble
Facebook
Github
Instagram
Linkedin
Pinterest
Stackoverflow
Twitch
Twitter
Xing
Youtube

Flags

FlagFr
FlagEn
FlagCs
FlagSk
FlagEs

Properties

NameType(s)DefaultRequired
content
shape
name
string
size
enum | number | string
md
title
string

Dependencies

Peer dependencies