@a5gard/baldr

v1.0.9

Published

7 days ago

A flexible icon library for React

0High
0Medium
0Low

8an3

react icons svg components

ÁSGARÐR/BALDR ICONS

React Icon Library

This is a programmatically generated React icon library designed for simplicity and accuracy.

Key Features

No Website Needed: Icons are visually similar across libraries, so a dedicated showcase website is omitted.
Script-Generated & Verified: The entire library is built using scripts. Upon completion, it automatically scans the icon directory to generate the list below, guaranteeing that every listed icon is available.
Two Search Methods:
1. Browser Search: Use your browser's find function (Ctrl+F / Cmd+F) to search the list on this page.
2. VS Code Extension: Use the "DevStack" extension from the marketplace for a quick-pick search. It inserts the icon component and adds the necessary import automatically.

Naming Convention

Icons are named intuitively, so you don't need to memorize their original names. The structure is:

[Main Theme][Container/Feature][Filled]

Main Theme: The core subject of the icon (e.g., ExclamationPoint, Text).
Container/Feature: An encompassing shape or added feature (e.g., Circle, File, Wrap).
Filled: Appended only if the icon has a filled variant.

Examples:

ExclamationPointCircle
TextWrap
ExclamationPointFile
QuestionMarkFileFilled

Installation

npm install @a5gard/baldr
# or
pnpm add @a5gard/baldr

Usage

import { ArrowBadgeRight } from '@a5gard/baldr'
 
<ArrowBadgeRight />

Icons

Abc
Ac
Ace
Aleph
Algiz
Alien
AlignCenter
AlignEndVertical
AlignJustified
AlignJustify
AlignLeft
AlignRight
Alpha
Amazon
AmericanExpress
Android
Ansuz
Anthropic
AppWindow
Apple
Archive
ArchiveX
ArrowBadgeDown
ArrowBadgeLeft
ArrowBadgeRight
ArrowBadgeUp
ArrowBigDown
ArrowBigLeft
ArrowBigRight
ArrowBigUp
ArrowDown
ArrowDownFromLine
ArrowDownLeft
ArrowDownRight
ArrowLeft
ArrowLeftRight
ArrowRight
ArrowUp
ArrowUpDown
ArrowUpFromLine
ArrowUpNarrowWide
ArrowUpRight
Assemblyai
Asterisk
Astro
At
AtSign
Atari
AudioWaveform
Award
Aws
Azure
Badge
BadgeCheck
Ban
Banknote
BarChart
BarChartArea
BarChartAreaBig
BarChartFile
Baseten
Bat
Bed
BeggarsHand
Bell
Berkano
Beta
Beth
Biohazard
Biome
Bitcoin
Bitcoin2
Blackforestlabs
Blackforestlabs1
Blocks
Bluetooth
Bmw
Bold
Book
BookOpen
BookOpenText
Bookmark
Bot
Bower
Box
Boxes
Braces
BracketsAngle
Brain
BrandAstro
Briefcase
BrightnessDown
BrightnessUp
Browser
Brush
Bug
Building
Bun
Burger
C
Calc
CalcDoubled
Calculator
Calendar
CalendarCheck
CalendarCheck2
CalendarDays
CalendarPlus
Camera
Capture
Car
CarFront
CaretDown
CaretLeft
CaretRight
CaretUp
Cb
Cen
Cerebras
Check
CheckCircle
CheckSquare
Checkbox
CheckboxCheckedFilled
ChefHat
ChevronDown
ChevronLeft
ChevronRight
ChevronUp
ChevronsDown
ChevronsLeft
ChevronsLeftRight
ChevronsRight
ChevronsUpDown
Circle
CircleOff
CirclePlus
Circleci
Cirrus
Claude
Clipboard
ClipboardCheck
ClipboardData
ClipboardText
Clock
Cloud
CloudRain
CloudUpload
Code
Codemirror
Coffeescript
Cog
Cohere
ColorPicker
ColorSwatch
ColoredStar
Columns
Columns3
Columns4
Command
CommandK
Compass
Component
Component1
Computer
ComputerChip
Construction
Cookie
Coolermaster
Copy
CornerUpLeft
CornerUpRight
Cplusplus
Cpu
CreditCard
Crown
Css
Cssmodules
Cva
Cweord
Dagaz
Dart
Dashboard
Database
Datefns
Deepgram
Deepinfra
Deepmind
Deepseek
Delete
Delta
DeviceCode
Digamma
DirectDebit
Discord
Discover
Docker
Docusaurus
Dog
DollarSign
Dot
Dotenv
Dots
DotsVertical
Download
Droplets
EPassport
Ear
Editorconfig
Ehwaz
Electron
Elevenlabs
Embla
Epsilon
Eraser
Eslint
Eta
Etcd
ExclamationPointMessageCircle
ExclamationPointOctagon
ExclamationPointTriangle
Expand
ExternalLink
Eye
EyeClosed
EyeOff
Facebook
Fal
Figma
File
FileCode
FileExport
FileImage
FileInput
FileJson
FileOutput
FilePlay
FilePlus
FileSpreadsheet
FileText
FileTypeBmp
FileTypeCss
FileTypeCsv
FileTypeDoc
FileTypeDocx
FileTypeHtml
FileTypeJpg
FileTypeJs
FileTypeJsx
FileTypePdf
FileTypePhp
FileTypePng
FileTypePpt
FileTypeRs
FileTypeSql
FileTypeSvg
FileTypeTs
FileTypeTsx
FileTypeTxt
FileTypeVue
FileTypeXls
FileTypeXml
FileTypeZip
FileTypography
FileX
Filter
Fireworks
FishBone
Flag
Flame
FloppyDisk
Focus
Folder
FolderCheck
FolderClosed
FolderDown
FolderOpen
FolderPlus
FolderRoot
FolderSearch
FolderTree
FolderUp
FolderUpload
Foobar2000
Footprints
Forward
FourOhFour
Frame
Funnel
FuseJs
GalleryVerticalEnd
Gamepad
Gamepad2
Gamma
Gar
Gatsby
Gauge
Gavel
Gebo
Gem
Gemini
Gemini1
Ger
Ghost
GhostFilled
GhostFloating
GhostFloatingFilled
Gift
GitBranch
GitCommitVertical
Github
Gitignoredotio
Gitlab
Gladia
Globe
GlobeLock
Gnubash
Go
Golang
Google
Googledataproc
Googlegemini
Googlejules
GraduationCap
Graphql
GreekDelta
Grid
Grid3X3
GripVertical
Grok
Grunt
Gulp
H1
H2
H3
H4
H5
H6
Hackaday
Haglaz
Hammer
Handlebarsdotjs
HardDrive
HardHat
Hash
Heading
Headphones
Heart
HeartHandshake
Hexagon
Highlight
Home
Html
Html5
Huggingface
Hume
ICircle
Image
Import
Inbox
IndentDecrease
IndentIncrease
Ingwaz
InputOtp
Instagram
Ior
Isaz
Italic
Iwaz
Jack
Javascript
Jcb
Jest
Json
Kanban
Kaph
Kappa
Key
Keyboard
King
Klarna
Koppa
Kotlin
Lambda
Laptop
Laukaz
Layers
LayoutGrid
Less
LetterCaseLower
LetterCaseToggle
LetterCaseUpper
Lexical
Library
LifeBuoy
Lightbulb
LineDashed
LineHeight
Link
Linkedin
List
ListCheck
ListChecks
ListFilter
ListFilterPlus
ListMusic
ListOrdered
ListRestart
Lmnt
Loader
LoaderCircle
Lock
LockOpen
LogIn
LogOut
Loki
Lota
Lucide
Luma
Maestro
Mail
MailCheck
Mannaz
Map
MapPin
Markdown
Marko
MasterCard
Maximize
Mdx
Megaphone
Mem
Menu
MessageCircle
MessagePlus
MessageSquare
MessagesSquare
Messenger
Mic
MicrochipBoard
Microphone
Microsoft
Microsoft1
Minimize
Mintlify
Minus
Mistralai
Mocha
MonacoEditor
Monitor
MoodBoy
Moon
MousePointer
Move
Mu
Music
Mysql
Naudiz
Navigation
Newspaper
Nextdotjs
Nextjs
Nodejs
NotebookText
NotepadText
Npm
Nu
Number20Small
Nun
Odin
Odin2
Ollama
Omicron
OpenSource
Openai
Os
Othalan
Package
Pacman
Paintbrush
Palette
PanelLeft
PanelLeftClose
PanelLeftOpen
PanelRight
Paperclip
Pause
Paypal
Pdf
Pe
Pen
PenTool
Pencil
PencilCheck
Percent
Perl
Perplexity
Pertho
Phone
Photo
PhotoCircle
Php
Pi
PictureInPicture
PieChart
PiggyBank
Pin
Pipecat
Plane
Platformio
Play
PlayerSkipForward
PlayerTrackNext
PlayerTrackPrev
Playstation
Plus
Pnpm
Pointer
Popcorn
Porsche
Postcss
Power
Powershell
Prescription
Prettier
Printer
Prisma
Pug
PuzzlePiece
Python
Qoph
QrCode
Queen
QuestionMarkCircle
QuestionMarkMessageCircle
Quote
R
Radar
Radio
Radixui
Raido
RatingStar
Razer
React
ReactArea
ReactAria
ReactDayPicker
Readme
Reason
Redis
Redo
RefreshCcw
RefreshCw
Remark
Remix
Repeat
Replicate
Reply
ReplyAll
Res
Revai
Rho
Rive
RobotFace
Rocket
Rollupdotjs
RotateCcw
RotateCw
Ruby
Ruler
Rust
Sade
Samekh
San
Sanity
Sass
Save
Scala
Scale
Scan
ScanLine
Scissors
Search
SearchX
Selector
Send
Sentry
Server
Settings
Shadcnui
Share
Sharp
Shield
Ship
ShoppingBag
ShoppingCart
Sidebar
SidebarRight
Sigel
Sigma
SkipBack
SkipForward
Skype
Slack
SlidersHorizontal
Smartphone
Smile
SmilePlus
Solo
Sony
SortAscending
SortDescending
Sparkles
Split
Spotify
Square
SquareSplitHorizontal
SquareTerminal
Stan
Star
StarOff
Steam
Stopwatch
Store
Storybook
Strikethrough
Stripe
Stylelint
Sublimetext
Subscript
Subtitles
Sun
Superscript
Svelte
Svg
Swift
Switch
Table
TableColumn
TableRow
Tabler
Tablet
Tag
Tailwindcss
Tally1
Tally2
Tally3
Tally4
Tally5
Target
Tau
Terminal
Terminal2
Testinglibrary
TextCursorInput
TextDecrease
TextIncrease
TextSize
TextWrap
TextWrapColumn
TextWrapDisabled
Theodinproject
Theta
ThumbsDown
ThumbsUp
Ticket
Tilde
Timer
Tiwaz
TogetherAi
Toml
Trash
Trash2
TrendingDown
TrendingUp
Trophy
Truck
Tsnode
Tv
Twitch
Twitter
Type
Typescript
Underline
Undo
Upload
Upsilon
Uruz
User
UserCheck
UserCircle
UserDown
UserHeart
UserMinus
UserPlus
UserSettings
UserSquareRounded
UserStar
Users
UsersGroup
Utensils
UtensilsCrossed
Vercel
Vertex
Video
VideoOff
View360
Visa
VisaElectron
Vite
Volume
Volume2
VolumeDown
VolumeOff
VolumeUp
VolumeX
Vue
Vuedotjs
Vulknut
Walk
Wallet
Wallpaper
Wand
Waveform
Waves
Webassembly
WesternUnion
Wifi
Wireshark
World
Wrench
Wunjo
X
XAi
XCircle
Yaml
Yarn
Yodh
Youtube
Yr
Zap
Zeta
ZoomIn
ZoomOut

Basic Usage

Import specific icons

import { Home, User } from '@a5gard/baldr';

function App() {
  return (
    <div>
      <Home className="text-primary" size={24} />
      <User className="text-gray-500" size={32} strokeWidth={1.5} />
    </div>
  );
}

Dynamic icon rendering

import { Icon, icons } from '@a5gard/baldr';

function DynamicIcon({ iconName }: { iconName: string }) {
  return <Icon name={iconName} icons={icons} className="text-blue-500" />;
}

Props

All icons accept the following props:

size: number | string (default: 24) - Size of the icon
color: string (default: 'currentColor') - Stroke color
strokeWidth: number | string (default: 2) - Width of the stroke
className: string - CSS classes (works with Tailwind!)
All standard SVG attributes

Tailwind CSS Integration

Works seamlessly with Tailwind:

<Home className="w-6 h-6 text-blue-500 hover:text-blue-700" />
<User className="text-primary dark:text-primary-dark" size={20} />