Iconography

Icons are visual representations of commands, devices, directories, or common actions.

Copy code
AcademicWriting
ActionDown
ActionLeft
ActionRight
ActionUp
Activate
AddImage
AddImageFill
AddToCart
AddToCart2
AddToCart2Fill
AddToCartFill
Adjustment
AdjustmentFill
Adult
AdultFill
Announcement
AnnouncementFill
ArrowDown
ArrowLeft
ArrowRight
ArrowUp
Attach
AwardBronze
AwardBronzeFill
AwardSilver
AwardSilverFill
AwardTrophy
AwardTrophyFill
Blog
BlogFill
Boat
BoatFill
Book
BookFill
Bot
BotFill
BoxEmptyFill
BoxFill
BoxNoData
BoxNoDataFill
BoxSomethings
BoxSomethingsFill
Build
BuildFill
Building
BuildingFill
Business
BusinessAnalyst
BusinessAnalystFill
BusinessFill
Calendar
CalendarFill
Camera
CameraFill
Card
CardFill
Cash
CashFill
ChargeNormal
ChargeNormalFill
ChargeSuper
ChargeSuperFill
Chat
ChatFill
Check
CheckCircle
CheckCircleFill
CheckFrame
CheckFrameFill
CheckSquare
CheckSquareFill
ChevronDown
ChevronLeft
ChevronRight
ChevronUp
Child
ChildFill
Clean
CleanFill
Clear
ClearCircle
ClearCircleFill
ClearFrame
ClearFrameFill
ClearSquare
ClearSquareFill
Close
ColorPalete
ColorPaleteFill
Comedy
ComedyFill
Comment
CommentFill
Compare
CompareFill
Contact
ContactFill
ControlCut
ControlMinus
ControlMinusCircle
ControlMinusCircleFill
ControlMinusFrame
ControlMinusFrameFill
ControlMinusSquare
ControlMinusSquareFill
ControlPlus
ControlPlusCircle
ControlPlusCircleFill
ControlPlusFrame
ControlPlusFrameFill
ControlPlusSquare
ControlPlusSquareFill
Copy
CopyFill
Darkmode
Deactivate
DecreaseChart
DecreaseChartFill
Delete
DeleteFill
Designer
DesignerFill
Development
DevelopmentFill
Dislike
DislikeFill
Document
DocumentFill
Download
DownloadFill
Drag
Drag2
Drag2Fill
Edit
EditFill
Emoji
EmojiFill
Eraser
EraserFill
Error
Expand
External
FaceId
Faq
Faq2
Faq2Fill
FaqFill
Favorite
FavoriteFill
Female
FieldDate
FieldNumber
FieldSelection
FieldText
Filter
FilterFill
FingerprintStraight
FingerprintTilt
Flag
FlagFill
FlightFrom
FlightFromFill
FlightTo
FlightToFill
Folder
FolderEmpty
FolderEmptyFill
FolderError
FolderErrorFill
FolderFill
FolderSomethings
FolderSomethingsFill
FrameContains
FrameContainsFill
FullScreen
FullScreenFill
Gift
GiftFill
Grammar
GrammarFill
GridView
GridViewFill
Group
GroupFill
GrowthChart
GrowthChartFill
Heart
HeartFill
Hide
HideFill
History
Home
HomeFill
Idea
IdeaFill
Image
Image360
ImageFill
Inbox
InboxFill
Information
InformationFill
Interview
InterviewFill
Language
LanguageFill
Laptop
LaptopFill
Layer
LayerFill
Like
LikeFill
Link
LinkBroken
ListView
ListViewFill
Loading
LocaionFill
Location
Lock
LockFill
Login
LoginFill
Lyrics
LyricsFill
Magic
MagicFill
MakeUp
MakeUpFill
Male
Melody
MobilePhone
MobilePhoneFill
MoreHorizontal
MoreVertical
MultipleImageFill
Music
MusicFill
Mute
MuteFill
NavLeft
NavMiddle
NavRight
Networking
NetworkingFill
NewChat
NewChatFill
Newborn
NewbornFill
NotificationsOn
NotificationsOnFill
Passport
PassportFill
PasswordHide
PasswordShow
Pause
PauseFill
PeekabooHide
PeekabooShow
Pet
PetFill
Phone
Pin
PinFill
Plane
PlaneFill
Play
PlayFill
Poem
PoemFill
Pos
PosFill
Pregnancy
PregnancyFill
Print
Professor
ProfessorFill
Profile
ProfileFill
QrCode
Question
QuestionFill
RecordAudio
RecordAudioFill
RecordVideo
RecordVideoFill
Refresh
Reply
ReplyFill
Reset
RotateLeft
RotateLeft2
RotateRight
RotateRight2
Save
SaveFill
Search
SearchFill
SearchNoResult
SearchNoResultFill
Send
SendFill
Settings
SettingsFill
Share
ShareFill
ShippingMotocycle
ShippingMotocycle2
ShippingMotocycle2Fill
ShippingMotocycleFill
ShoppingBag
ShoppingBagFill
ShoppingBasket
ShoppingBasketFill
ShoppingCart
ShoppingCartFill
Show
ShowFill
SignOut
SignOutFill
Sort
SortAlphabetDown
SortAlphabetUp
SortDown
SortLatestDown
SortLatestUp
SortPriceDown
SortPriceUp
SortRatingDown
SortRatingUp
SortUp
Star
StarFill
Store
Store2
Store2Fill
StoreFill
Storytelling
StorytellingFill
Student
StudentFill
Subscription
SubscriptionFill
Swipe
SwipeFill
Tablet
TabletFill
Tag
TagFill
TaskDone
TaskList
TeAlignCenter
TeAlignJustify
TeAlignJustifyLeft
TeAlignJustifyRight
TeAlignLeft
TeAlignRight
TeAt
TeBold
TeCode
TeColumnInsertLeft
TeColumnInsertRight
TeColumnRemoveLeft
TeColumnRemoveRight
TeH1
TeH2
TeH3
TeItalic
TeListBullet
TeListNumberic
TeParagraph
TeQuote
TeRowInsertBottom
TeRowInsertTop
TeRowRemoveBottom
TeRowRemoveTop
TeStrike
TeTableInsert
TeTableRemove
TeTextHighlight
TeTextHighlight2
TeUnderline
TextArea
TextScanner
Ticket
TicketFill
Time
TimeFill
Toddler
ToddlerFill
Unbox
UnboxFill
Unlock
UnlockFill
Upload
UploadFill
UserBanned
UserBannedFill
UserConnect
UserConnectFill
UserSettings
UserSettingsFill
Vehicle
VehicleFill
Verified
VerifiedFill
VerifiedNot
VerifiedNotFill
Video
VideoFill
VideoUploadFill
ViewContains
ViewContainsFill
ViewFullScreen
ViewFullScreenFill
VolumeDown
VolumeDownFill
VolumeMute
VolumeMuteFill
VolumeUp
VolumeUpFill
Wallet
Wallet2
Wallet2Fill
WalletFill
Warning
WarningFill
Website
Website2
Website2Fill
WebsiteFill
Whiteboard
WhiteboardFill
Worldwide
WorldwideFill
ZoomIn
ZoomInFill
ZoomOut
ZoomOutFill

Installation

Icon is a peer dependency of bigin-ui, but it can be used standalone by install @bigin/icons-vue package.

pnpm add @bigin/icons-vue

Register globally

// main.ts
import { createApp } from 'vue'
import * as BiginIcons from '@bigin/icons-vue'
import App from 'App.vue'

const app = createApp(App)

Object.entries(BiginIcons).forEach(([key, component]) => {
  app.component(`I${key}`, component)
})


 




 
 
 
<template>
  <b-icon>
    <i-arrow-left />
  </b-icon>
</template>


 


Import on demand

<template>
  <b-icon>
    <arrow-left />
  </b-icon>
</template>

<script setup lang="ts">
import { ArrowLeft } from '@bigin/icons-vue'
</script>


 




 

Last Updated:
Contributors: Tam Mai