Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-skills-icons

galkremer1759MIT1.0.10TypeScript support: included

A React component library for displaying skill icons

react, icons, skills, portfolio

readme

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:

  1. Use any icon from the react-icons library as a custom icon
  2. Maintain consistency with the built-in icons
  3. 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.

License

MIT © Gal Kremer