React Skills Icons

A flexible React component library for displaying programming and technology skill icons, built on top of react-icons.

Features

100+ technology and skill icons
Based on react-icons library
Support for custom icons
Customizable size and colors
Optional labels
TypeScript support
Built-in Tailwind CSS support

Installation

npm install react-skills-icons

Usage

import { SkillIcon } from 'react-skills-icons';

// Basic usage
<SkillIcon name="react" />

// With custom size
<SkillIcon name="javascript" size={32} />

// With custom color
<SkillIcon name="typescript" color="#3178C6" />

// With custom icon from react-icons
```bash
npm install react-icons

import { FaCode } from 'react-icons/fa';
<SkillIcon name="custom" customIcon={FaCode} />

// With label
<SkillIcon name="python" showLabel={true} />

// With custom label styling
<SkillIcon 
  name="nodejs" 
  showLabel={true}
  textSize="lg"
  labelClassName="font-bold"
/>

Props

Prop	Type	Default	Description
name	string	-	The name of the icon to display
size	number	24	Size of the icon in pixels
color	string	-	Color of the icon (hex, rgb, etc.)
customIcon	IconType	-	Custom react-icons component
showLabel	boolean	true	Whether to show the icon label
labelClassName	string	-	Additional classes for the label
className	string	-	Additional classes for the icon wrapper
textSize	'xs' \| 'sm' \| 'base' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| '4xl' \| '5xl'	'xs'	Size of the label text

Custom Icons

The library is built on top of react-icons, which means you can:

Use any icon from the react-icons library as a custom icon
Maintain consistency with the built-in icons
Get the same styling and customization options

Example with custom icon:

import { FaCode } from 'react-icons/fa';

// Use a custom icon from react-icons
<SkillIcon 
  name="custom-skill" 
  customIcon={FaCode}
  size={32}
  color="#ff0000"
  showLabel={true}
/>

Available Icons

The library includes icons for popular technologies including:

Programming Languages (JavaScript, TypeScript, Python, etc.)
Frontend Frameworks (React, Vue, Angular, etc.)
Backend Technologies (Node.js, Django, etc.)
Databases (PostgreSQL, MongoDB, etc.)
Cloud Services (AWS, Azure, GCP, etc.)
And many more!

For a complete list of available icons, check out our Storybook documentation.

Documentation

For full documentation and interactive examples, visit our Storybook documentation.

Development

# Install dependencies
npm install

# Run tests
npm test

# Run Storybook
npm run storybook

# Build the library
npm run build

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Package detail

react-skills-icons

readme