IconFont

The IconFont component uses a font-based approach to display scalable icons. It provides a collection of icons that can be styled with CSS, just like text, ensuring consistency and flexibility in size, color, and other properties. This component is ideal for adding visually appealing and responsive icons to your application, enhancing user interface and experience.

import * as React from 'react'
import { Icons } from '@welcome-ui/icons.font'
const Example = () => {
return <Icons.PositiveStraight />
}
export default Example

Installation

1

Run the following command:

yarn add @welcome-ui/icons.font
2

Import component:

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

Size

Use size property with xs, sm, md, lg xl or xxl.

Color

Icons inherit the color from their parent.

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:

Icons

Arrows

Icons.Left
Icons.Right
Icons.Up
Icons.Down
Icons.ArrowLeft
Icons.ArrowRight
Icons.ArrowUp
Icons.ArrowDown

Actions

Icons.Activity
Icons.Add
Icons.Archive
Icons.AspectRatioFit
Icons.AspectRatioFill
Icons.Bulk
Icons.InProgressCandidate
Icons.NewCandidate
Icons.RefuseCandidate
Icons.Check
Icons.Cross
Icons.Trash
Icons.Download
Icons.Upload
Icons.DragAndDrop
Icons.Copy
Icons.Edit
Icons.Collapse
Icons.Expand
Icons.ExpandText
Icons.ExternalLink
Icons.Heart
Icons.HeartOutline
Icons.Filters
Icons.Show
Icons.Hide
Icons.Link
Icons.LogOut
Icons.Menu
Icons.MoreAndroid
Icons.More
Icons.Move
Icons.Notification
Icons.Print
Icons.Promote
Icons.Reset
Icons.Save
Icons.Search
Icons.Settings
Icons.Share1
Icons.Share2

Miscellaneous

Icons.Actions
Icons.CoverLetter
Icons.Details
Icons.Resume
Icons.Questions
Icons.Negative
Icons.Positive
Icons.NegativeOutline
Icons.PositiveOutline
Icons.NegativeStraight
Icons.PositiveStraight
Icons.Address
Icons.Alert
Icons.AlertOutline
Icons.SquareAlert
Icons.Analytics
Icons.Attachment
Icons.BarChart
Icons.Burn
Icons.CandidateStatus
Icons.CardView
Icons.Trophy
Icons.Bookmark
Icons.BookmarkOutline
Icons.Clock
Icons.Comment
Icons.CommentOutline
Icons.Contract
Icons.Write
Icons.Date
Icons.Department
Icons.Earth
Icons.EducationLevel
Icons.Email
Icons.EmailOutline
Icons.Equal
Icons.Remove
Icons.Folder
Icons.Female
Icons.Male
Icons.Home
Icons.Information
Icons.InformationOutline
Icons.Kanban
Icons.Language
Icons.Suitcase
Icons.LineChart
Icons.Location
Icons.Lock
Icons.LockRounded
Icons.FlagPointed
Icons.Mention
Icons.Avatar
Icons.User
Icons.UserOutline
Icons.OfferStatus
Icons.Office
Icons.Origine
Icons.Phone
Icons.PhoneOutline
Icons.Pin
Icons.Podcast
Icons.SearchPeople
Icons.Remote
Icons.Review
Icons.ReviewOutline
Icons.Salary
Icons.EuroCurrency
Icons.Source
Icons.Question
Icons.Anniversary
Icons.Birthday
Icons.Celebrate
Icons.Star
Icons.StarOutline
Icons.Tag
Icons.Tablet
Icons.Mobile
Icons.VideoCamera
Icons.VideoCamera2
Icons.Create
Icons.Update
Icons.Success
Icons.Certified
Icons.Connection

WTF

Icons.Basketball
Icons.Book
Icons.Book2
Icons.Bulb
Icons.Buoy
Icons.Calcul
Icons.Camera
Icons.Caddy
Icons.Clipboard
Icons.Coffee
Icons.Compass
Icons.Computer
Icons.HardHat
Icons.CreditCard
Icons.CrescentMoon
Icons.CrescentMoonOutline
Icons.CrossTarget
Icons.Crown
Icons.Dish
Icons.Diamond
Icons.Factory
Icons.Fingerprint
Icons.Flag
Icons.FlagOutline
Icons.Gear
Icons.Handshake
Icons.Hashtag
Icons.Headset
Icons.HeartShiny
Icons.House
Icons.JusticeHammer
Icons.Key
Icons.Leaf
Icons.Map
Icons.Masonry
Icons.Masonry2
Icons.Megaphone
Icons.Mic
Icons.Microship
Icons.Money
Icons.Mountain
Icons.Music
Icons.Paperplane
Icons.Pencil
Icons.Pictures
Icons.Piechart
Icons.Pizza
Icons.Puzzle
Icons.PuzzleOutline
Icons.Shield
Icons.Spanner
Icons.Sparkles
Icons.Stackserver
Icons.Sun
Icons.Target
Icons.ThumbUp
Icons.ThumbDown
Icons.Teepee
Icons.Tree
Icons.CommonArea
Icons.MeetingRoom
Icons.Refresh
Icons.Video
Icons.Unavailable

Files

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

Player

Icons.Play
Icons.PlayOutline
Icons.ControlStop
Icons.ControlPause
Icons.ControlForward
Icons.ControlBackward
Icons.FullscreenOff
Icons.FullscreenOn
Icons.ScreenshareOff
Icons.ScreenshareOn
Icons.MicrophoneOn
Icons.MicrophoneOff
Icons.Cast
Icons.CastConnected
Icons.CastUnavailable
Icons.CameraOn
Icons.CameraOff
Icons.Airplay
Icons.WatchLater
Icons.Playlist
Icons.SoundOn
Icons.SoundOff
Icons.Subtitle

Avatar

Icons.AvatarAccessory
Icons.AvatarBody
Icons.AvatarBottom
Icons.AvatarCostume
Icons.AvatarHead
Icons.AvatarTop

Markdown

Icons.Bold
Icons.Code
Icons.CodeBlock
Icons.Italic
Icons.OrderedList
Icons.UnorderedList
Icons.Quote
Icons.Strikethrough
Icons.Heading
Icons.Heading1
Icons.Heading2
Icons.Heading3
Icons.Heading4
Icons.Heading5
Icons.Heading6
Icons.Type
Icons.Underline

Table

Icons.Table
Icons.TableColumnAddAfter
Icons.TableColumnAddBefore
Icons.TableColumnRemove
Icons.TableDelete
Icons.TableDivide
Icons.TableMergeCells
Icons.TableRowAddAbove
Icons.TableRowAddBelow
Icons.TableRowRemove

Brands

Icons.Behance
Icons.Dribbble
Icons.Facebook
Icons.Github
Icons.Google
Icons.Instagram
Icons.Linkedin
Icons.Npm
Icons.Pinterest
Icons.Slack
Icons.Stackoverflow
Icons.Tiktok
Icons.Twitch
Icons.Wttj
Icons.X
Icons.Xing
Icons.Youtube
Icons.Zapier

Flags

Icons.FlagFr
Icons.FlagEn
Icons.FlagCs
Icons.FlagSk
Icons.FlagEs
Icons.FlagUs