Pixelarticons React

React components for pixelarticons.

Icon Gallery

New! View the full interactive gallery with all 486 icons

🚨 Version 2.0.0 Migration Guide 🚨

The package includes several improvements in version 2.0.0:

• Interactive gallery with all 486 icons
• Improved documentation
• Better React component support
• Enhanced build process

Migration Steps:

1. Update your package.json dependency:

- "@nicholuassommer/pixelarticons-react": "^1.0.1"
+ "@nsmr/pixelart-react": "^2.0.0"

2. Update your imports:

Previous import style:

import { User, Heart } from "@nicholuassommer/pixelarticons-react";

New import options:

// Option 1: Direct from package (similar to before)
import { User, Heart } from "@nsmr/pixelart-react";

// Option 2: New shorter path
import { User, Heart } from "pixelart/react";

Installation

You can install this package from npm or GitHub Packages:

# From npm
npm install @nsmr/pixelart-react

# From GitHub Packages
npm install @gitntg/pixelart-react

Usage

Direct Import

import { User, Heart, ArrowRight } from "pixelart/react";

function App() {
  return (
    <div>
      <User size={24} />
      <Heart size={24} />
      <ArrowRight size={24} />
    </div>
  );
}

Using Icon Component

import { Icon } from "pixelart/react";

function App() {
  return (
    <div>
      <Icon name="user" size={24} />
      <Icon name="heart" size={24} />
      <Icon name="arrow-right" size={24} />
    </div>
  );
}

Icon Props

All icons accept the following props:

Prop	Type	Default	Description
size	number | string	24	Width and height of the icon
className	string	''	Additional CSS classes
...	SVGProps		All other props are passed to the SVG element

Available Icons

Here's a complete list of all available icons:

Icons Starting with Numbers (require special syntax)

For icons starting with numbers, you can either use the component name with "Icon" prefix or use the original name with the Icon component:

// Direct import
import { Icon4g } from "pixelart/react";

// Or using the Icon component
<Icon name="4g" />;

• Icon4g (or <Icon name="4g" />)
• Icon4k (or <Icon name="4k" />)
• Icon4kBox (or <Icon name="4k-box" />)
• Icon5g (or <Icon name="5g" />)

Complete Icon List

Here's an alphabetical list of all available icon components:

• AbTesting
• Ac
• AddBoxMultiple
• AddBox
• AddCol
• AddGrid
• AddRow
• Alert
• AlignCenter
• AlignJustify
• AlignLeft
• AlignRight
• Analytics
• Anchor
• Android
• Animation
• Archive
• ArrowBarDown
• ArrowBarLeft
• ArrowBarRight
• ArrowBarUp
• ArrowDownBox
• ArrowDown
• ArrowLeftBox
• ArrowLeft
• ArrowRightBox
• ArrowRight
• ArrowUpBox
• ArrowUp
• ArrowsHorizontal
• ArrowsVertical
• ArtText
• ArticleMultiple
• Article
• AspectRatio
• At
• Attachment
• AudioDevice
• Backspace
• BagAlt
• Bag
• Bank
• BarcodeAlt
• Barcode
• Basketball
• Bath
• Battery0
• Battery1
• Battery2
• Battery3
• BatteryCharging
• Beaker
• BedDouble
• BedSingle
• Bell
• Bitcoin
• Bluetooth
• Bold
• BookAlt
• Book
• Bookmark
• BorderAll
• BorderBottom
• BorderHorizontal
• BorderInner
• BorderLeft
• BorderNone
• BorderOuter
• BorderRight
• BorderStyle
• BorderTop
• BorderVertical
• Bot
• Bowl
• Box
• Boy
• Braces
• Brackets
• Brain
• Briefcase
• Broom
• Browser
• Brush
• Bug
• Building
• BulbOff
• Bulb
• Button
• Cake
• Calculator
• CalendarAlt
• Calendar
• Camera
• Car
• Caret
• Cast
• Chain
• Chat
• CheckBox
• CheckDouble
• Check
• Chess
• ChevronDown
• ChevronLeft
• ChevronRight
• ChevronUp
• Chip
• Clipboard
• ClockAlt
• Clock
• Cloud
• Code
• CodepenAlt
• Codepen
• Cog
• ColorPicker
• Colors
• Columns
• Command
• Compass
• Contacts
• Contract
• Cookie
• Copy
• CornerDownLeft
• CornerDownRight
• CornerLeftDown
• CornerLeftUp
• CornerRightDown
• CornerRightUp
• CornerUpLeft
• CornerUpRight
• CpuAlt
• Cpu
• CreditCard
• Crop
• Cross
• Crosshair
• Cube
• CurlyBraces
• Currency
• Dashboard
• Database
• Deletion
• Delimiter
• Deviantart
• Devices
• Diamond
• Direction
• Discord
• Dish
• Divide
• Dna
• Dock
• Document
• Documents
• DonutChart
• Door
• DotGrid
• DotsMidsplit
• Dots
• Download
• Drag
• DragAlt
• Dribbble
• Drink
• DropInvert
• Drop
• Duplicate
• Enter
• Envelope
• Equalizer
• EraserAlt
• Eraser
• Exchange
• Exclude
• ExpandAlt
• Expand
• Extension
• Eye
• EyeAlt
• Feather
• Female
• File
• FilmStack
• Film
• FilterAlt
• Filter
• Fingerprint
• FlagAlt
• Flag
• FolderAdd
• Folder
• Font
• Fork
• Fountain
• Gamepad
• Gatsbyjs
• Gesture
• Gift
• Girl
• Git
• GithubAlt
• Github
• Gitlab
• Globe
• Google
• Graphql
• Grid
• GroupAdd
• Group
• Guitar
• Hash
• Hashtag
• Headphones
• Heart
• HeartFilled
• HeartRate
• History
• Home
• Hourglass
• House
• Id
• Image
• Import
• Inclination
• Infinity
• Info
• Injection
• Instagram
• Intersect
• IosFillet
• IosRadio
• IosSwitch
• Italic
• Jpg
• Key
• Keyboard
• KeyboardAlt
• Keyhole
• Laptop
• Lastfm
• LassoVectorSelection
• LassoVectorSelect
• Layer
• Layout
• Leaf
• Library
• License
• Lifebuoy
• Lightbulb
• LineSpace
• Link
• Linkedin
• Linux
• ListAdd
• ListBox
• ListMinus
• List
• Litecoin
• Loader
• Loading
• Location
• LockOpen
• Lock
• Log
• LogicAnd
• LogicOr
• Login
• Logout
• Luggage
• Mail
• Mailbox
• Male
• Map
• Markdown
• Maximise
• Medal
• Mega
• Menu
• Mic
• MicAlt
• Microsoft
• Minimise
• MinusBox
• MinusBoxMultiple
• Minus
• Monitor
• MoonAlt
• Moon
• MoreHorizontal
• MoreVertical
• Mouse
• Move
• Music
• Navigation
• Nextjs
• NoteText
• Note
• Npm
• OneFingerSelect
• OneFingerTap
• Opacity
• OpenInBrowser
• OpenInWindow
• Options
• PageBreak
• Page
• Paint
• PaletteAlt
• Palette
• Pan
• Paperclip
• Parachute
• Paragraph
• Paste
• Pause
• Paw
• PenAlt
• Pen
• PentagonBottom
• PentagonDown
• PentagonLeft
• PentagonRight
• PentagonTop
• PentagonUp
• Performance
• Phone
• PhoneMissed
• PieChart
• PieChartAlt
• Pin
• Placeholder
• Planet
• Play
• Playlist
• Plus
• Power
• Prev
• Print
• RadioHandheld
• RadioOn
• RadioSignal
• RadioTower
• Reciept
• RecieptAlt
• Redo
• Reload
• RemoveBox
• RemoveBoxMultiple
• Repeat
• Reply
• ReplyAll
• RoundedCorner
• Save
• Scale
• Script
• ScriptText
• ScrollHorizontal
• ScrollVertical
• Sd
• Search
• Section
• SectionCopy
• SectionMinus
• SectionPlus
• SectionX
• Server
• SharpCorner
• Shield
• ShieldOff
• Ship
• ShoppingBag
• Shuffle
• Sliders
• Sliders2
• Sort
• SortAlphabetic
• SortNumeric
• Speaker
• SpeedFast
• SpeedMedium
• SpeedSlow
• Spotlight
• Store
• Subscriptions
• Subtitles
• Suitcase
• SunAlt
• Sun
• Switch
• Sync
• Tab
• Table
• Tea
• Teach
• TextAdd
• TextColums
• TextSearch
• TextWrap
• Timeline
• ToggleLeft
• ToggleRight
• Tournament
• TrackChanges
• TrashAlt
• Trash
• TrendingDown
• TrendingUp
• Trending
• Trophy
• Truck
• Undo
• Ungroup
• Unlink
• Upload
• UserMinus
• UserPlus
• User
• Users
• UserX
• VideoOff
• Video
• ViewCol
• ViewList
• ViewportNarrow
• ViewportWide
• Visible
• Volume1
• Volume2
• Volume3
• VolumeMinus
• VolumePlus
• VolumeVibrate
• VolumeX
• Volume
• Wallet
• WarningBox
• Wind
• Zap
• ZoomIn
• ZoomOut

Icon Demo

For a visual reference of all icons, run the demo:

npm run demo

This will start a local server with a visual catalog of all available icons.

License

MIT