IconsFont

Install and import icon font #

yarn add @welcome-ui/icons.font @xstyled/styled-components @xstyled/system react react-dom styled-components

import { Icons } from '@welcome-ui/icons.font'

import { IconFont } from '@welcome-ui/icons.font'

Call Icon from Icons import #

Show editor

Call Icon from IconFont import #

Show editor

Call Icon from css import #

To import IconFont css stylesheet, you should use this import path:

require('@welcome-ui/icons.font/fonts/welcome-icon-font.css')

Here is an example on how to use css class to display icons:

Show editor

Available icons #

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

Directions #

Left
Right
Up
Down
Show editor

Actions #

Activity
Add
Archive
AspectRatioFill
AspectRatioFit
Bulk
Check
Collapse
Copy
Cross
DragAndDrop
Edit
Eye
ExpandText
Expand
ExternalLink
Filters
FullscreenOff
FullscreenOn
Get
Heart
HeartOutline
Information
Link
LogOut
Menu
More
Notification
Pin
Play
PlayOutline
Print
Promote
RefuseCandidate
Remote
Remove
Reset
Save
Search
Settings
Share1
Share2
Trash
Upload
UserOutline
User
Video
Write
Show editor

Appreciations #

Negative
Positive
NegativeOutline
PositiveOutline
NegativeStraight
PositiveStraight
Show editor

Categories #

Actions
CoverLetter
Details
Resume
Questions
Show editor

Miscellaneous #

Address
Alert
Analytics
Anniversary
Attachment
Avatar
BarChart
Birthday
Burn
CandidateStatus
CardView
Celebrate
Clock
CommentOutline
Comment
Contract
Create
Date
Department
Earth
EducationLevel
EmailOutline
Email
Female
Fingerprint
Folder
Information
InProgressCandidate
Kanban
Language
LineChart
Location
Male
Mansanory
Mention
NewCandidate
OfferStatus
Office
Origine
PhoneOutline
Phone
Pictures
Podcast
Question
ReviewOutline
Review
Salary
SearchPeople
SoundOn
Source
Star
StarOutline
Subtitle
Suitcase
Tag
Tags
Teepee
Update
VideoCamera
VideoCamera2
Show editor

Files #

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

WTF #

Basketball
Book
Book2
Bulb
Buoy
Caddy
Calcul
Camera
Chevron
Clipboard
Coffee
Compass
Computer
CreditCard
CrescentMoon
CrescentMoonOutline
CrossTarget
Crown
Diamond
Dish
Factory
Flag
FlagFill
FlagPointed
Gear
Handshake
HardHat
Hashtag
Headset
HeartShiny
House
JusticeHammer
Key
Leaf
Lock
LockRounded
Map
Megaphone
Mic
Microship
Money
Mountain
Music
Paperplane
Pencil
Piechart
Pizza
Puzzle
PuzzleOutline
Refresh
Shield
Spanner
Stackserver
Sun
Target
Thumbup
Tree
Trophy
Show editor

Markdown #

Bold
Code
CodeBlock
Heading
Heading1
Heading2
Heading3
Heading4
Heading5
Heading6
Italic
Link
UnorderedList
OrderedList
Quote
Strikethrough
Type
Underline
Show editor

Table #

Table
TableColumnAddAfter
TableColumnAddBefore
TableColumnRemove
TableDelete
TableDivide
TableMergeCells
TableRowAddAbove
TableRowAddBelow
TableRowRemove
Show editor

Brands #

Behance
Dribbble
Facebook
Github
Google
Instagram
Linkedin
Npm
Pinterest
Stackoverflow
Twitch
Twitter
Xing
Youtube
Wttj
Show editor

Dependencies #

• - @welcome-ui/system
  ^3.0.0

Peer dependencies #

• - @xstyled/styled-components
  ^2.2.3
• - @xstyled/system
  ^2.2.3
• - react
  ^16.10.2 || ^17.0.1
• - react-dom
  ^16.10.2 || ^17.0.1
• - styled-components
  ^5.2.1