React-Skillicons

Use Skill Icons by tandpfun in React!

Installation

Install with npm

  npm install react-skillicons

Usage/Examples

import React from "react";
import { Github_Dark, JavaScript, React_Dark } from "react-skillicons";
// Add other icons here

function App() {
  return (
    <div>
      <Github_Dark />
      <JavaScript />
      <React_Dark className="icon" />
    </div>
  );
}

export default App;

Available Icons

To see all Icons visit skillicons.dev

| Icon Name | Usage | | ------------------- | ------------------------- | | AWS_Dark | <AWS_Dark /> | | AWS_Light | <AWS_Light /> | | Ableton_Dark | <Ableton_Dark /> | | Ableton_Light | <Ableton_Light /> | | ActivityPub_Dark | <ActivityPub_Dark /> | | ActivityPub_Light | <ActivityPub_Light /> | | Actix_Dark | <Actix_Dark /> | | Actix_Light | <Actix_Light /> | | Adonis | <Adonis /> | | AfterEffects | <AfterEffects /> | | AiScript_Dark | <AiScript_Dark /> | | AiScript_Light | <AiScript_Light /> | | AlpineJS_Dark | <AlpineJS_Dark /> | | AlpineJS_Light | <AlpineJS_Light /> | | AndroidStudio_Dark | <AndroidStudio_Dark /> | | AndroidStudio_Light | <AndroidStudio_Light /> | | Angular_Dark | <Angular_Dark /> | | Angular_Light | <Angular_Light /> | | Ansible | <Ansible /> | | Apollo | <Apollo /> | | Appwrite | <Appwrite /> | | Arduino | <Arduino /> | | Astro | <Astro /> | | Atom | <Atom /> | | Audition | <Audition /> | | AutoCAD_Dark | <AutoCAD_Dark /> | | AutoCAD_Light | <AutoCAD_Light /> | | Azul | <Azul /> | | Azure_Dark | <Azure_Dark /> | | Azure_Light | <Azure_Light /> | | BSD_Dark | <BSD_Dark /> | | BSD_Light | <BSD_Light /> | | Babel | <Babel /> | | Bash_Dark | <Bash_Dark /> | | Bash_Light | <Bash_Light /> | | Bevy_Dark | <Bevy_Dark /> | | Bevy_Light | <Bevy_Light /> | | Blender_Dark | <Blender_Dark /> | | Blender_Light | <Blender_Light /> | | Bootstrap | <Bootstrap /> | | C | <C /> | | CMake_Dark | <CMake_Dark /> | | CMake_Light | <CMake_Light /> | | CPP | <CPP /> | | CS | <CS /> | | CSS | <CSS /> | | Cassandra_Dark | <Cassandra_Dark /> | | Cassandra_Light | <Cassandra_Light /> | | Clojure_Dark | <Clojure_Dark /> | | Clojure_Light | <Clojure_Light /> | | Cloudflare_Dark | <Cloudflare_Dark /> | | Cloudflare_Light | <Cloudflare_Light /> | | CodePen_Dark | <CodePen_Dark /> | | CodePen_Light | <CodePen_Light /> | | CoffeeScript_Dark | <CoffeeScript_Dark /> | | CoffeeScript_Light | <CoffeeScript_Light /> | | Crystal_Dark | <Crystal_Dark /> | | Crystal_Light | <Crystal_Light /> | | D3_Dark | <D3_Dark /> | | D3_Light | <D3_Light /> | | DENO_Dark | <DENO_Dark /> | | DENO_Light | <DENO_Light /> | | Dart_Dark | <Dart_Dark /> | | Dart_Light | <Dart_Light /> | | DevTo_Dark | <DevTo_Dark /> | | DevTo_Light | <DevTo_Light /> | | Discord | <Discord /> | | DiscordBots | <DiscordBots /> | | Django | <Django /> | | Docker | <Docker /> | | DotNet | <DotNet /> | | DynamoDB_Dark | <DynamoDB_Dark /> | | DynamoDB_Light | <DynamoDB_Light /> | | Eclipse_Dark | <Eclipse_Dark /> | | Eclipse_Light | <Eclipse_Light /> | | Electron | <Electron /> | | Elixir_Dark | <Elixir_Dark /> | | Elixir_Light | <Elixir_Light /> | | Emacs | <Emacs /> | | Ember | <Ember /> | | Emotion_Dark | <Emotion_Dark /> | | Emotion_Light | <Emotion_Light /> | | ExpressJS_Dark | <ExpressJS_Dark /> | | ExpressJS_Light | <ExpressJS_Light /> | | FastAPI | <FastAPI /> | | Fediverse_Dark | <Fediverse_Dark /> | | Fediverse_Light | <Fediverse_Light /> | | Figma_Dark | <Figma_Dark /> | | Figma_Light | <Figma_Light /> | | Firebase_Dark | <Firebase_Dark /> | | Firebase_Light | <Firebase_Light /> | | Flask_Dark | <Flask_Dark /> | | Flask_Light | <Flask_Light /> | | Flutter_Dark | <Flutter_Dark /> | | Flutter_Light | <Flutter_Light /> | | Forth | <Forth /> | | Fortran | <Fortran /> | | GCP_Dark | <GCP_Dark /> | | GCP_Light | <GCP_Light /> | | GTK_Dark | <GTK_Dark /> | | GTK_Light | <GTK_Light /> | | GameMakerStudio | <GameMakerStudio /> | | Gatsby | <Gatsby /> | | Gherkin_Dark | <Gherkin_Dark /> | | Gherkin_Light | <Gherkin_Light /> | | Git | <Git /> | | GitLab_Dark | <GitLab_Dark /> | | GitLab_Light | <GitLab_Light /> | | GithubActions_Dark | <GithubActions_Dark /> | | GithubActions_Light | <GithubActions_Light /> | | Github_Dark | <Github_Dark /> | | Github_Light | <Github_Light /> | | GoLang | <GoLang /> | | Godot_Dark | <Godot_Dark /> | | Godot_Light | <Godot_Light /> | | Gradle_Dark | <Gradle_Dark /> | | Gradle_Light | <Gradle_Light /> | | Grafana_Dark | <Grafana_Dark /> | | Grafana_Light | <Grafana_Light /> | | GraphQL_Dark | <GraphQL_Dark /> | | GraphQL_Light | <GraphQL_Light /> | | Gulp | <Gulp /> | | HTML | <HTML /> | | Haskell_Dark | <Haskell_Dark /> | | Haskell_Light | <Haskell_Light /> | | HaxeFlixel_Dark | <HaxeFlixel_Dark /> | | HaxeFlixel_Light | <HaxeFlixel_Light /> | | Haxe_Dark | <Haxe_Dark /> | | Haxe_Light | <Haxe_Light /> | | Heroku | <Heroku /> | | Hibernate_Dark | <Hibernate_Dark /> | | Hibernate_Light | <Hibernate_Light /> | | IPFS_Dark | <IPFS_Dark /> | | IPFS_Light | <IPFS_Light /> | | Idea_Dark | <Idea_Dark /> | | Idea_Light | <Idea_Light /> | | Illustrator | <Illustrator /> | | Instagram | <Instagram /> | | JQuery | <JQuery /> | | JavaScript | <JavaScript /> | | Java_Dark | <Java_Dark /> | | Java_Light | <Java_Light /> | | Jenkins_Dark | <Jenkins_Dark /> | | Jenkins_Light | <Jenkins_Light /> | | Jest | <Jest /> | | Julia_Dark | <Julia_Dark /> | | Julia_Light | <Julia_Light /> | | Kafka | <Kafka /> | | Kotlin_Dark | <Kotlin_Dark /> | | Kotlin_Light | <Kotlin_Light /> | | Ktor_Dark | <Ktor_Dark /> | | Ktor_Light | <Ktor_Light /> | | Kubernetes | <Kubernetes /> | | LaTeX_Dark | <LaTeX_Dark /> | | LaTeX_Light | <LaTeX_Light /> | | Laravel_Dark | <Laravel_Dark /> | | Laravel_Light | <Laravel_Light /> | | LinkedIn | <LinkedIn /> | | Linux_Dark | <Linux_Dark /> | | Linux_Light | <Linux_Light /> | | Lit_Dark | <Lit_Dark /> | | Lit_Light | <Lit_Light /> | | Lua_Dark | <Lua_Dark /> | | Lua_Light | <Lua_Light /> | | Markdown_Dark | <Markdown_Dark /> | | Markdown_Light | <Markdown_Light /> | | Mastodon_Dark | <Mastodon_Dark /> | | Mastodon_Light | <Mastodon_Light /> | | MaterialUI_Dark | <MaterialUI_Dark /> | | MaterialUI_Light | <MaterialUI_Light /> | | Matlab_Dark | <Matlab_Dark /> | | Matlab_Light | <Matlab_Light /> | | Maven_Dark | <Maven_Dark /> | | Maven_Light | <Maven_Light /> | | Misskey_Dark | <Misskey_Dark /> | | Misskey_Light | <Misskey_Light /> | | MongoDB | <MongoDB /> | | MySQL_Dark | <MySQL_Dark /> | | MySQL_Light | <MySQL_Light /> | | NeoVim_Dark | <NeoVim_Dark /> | | NeoVim_Light | <NeoVim_Light /> | | NestJS_Dark | <NestJS_Dark /> | | NestJS_Light | <NestJS_Light /> | | Netlify_Dark | <Netlify_Dark /> | | Netlify_Light | <Netlify_Light /> | | NextJS_Dark | <NextJS_Dark /> | | NextJS_Light | <NextJS_Light /> | | Nginx | <Nginx /> | | Nim_Dark | <Nim_Dark /> | | Nim_Light | <Nim_Light /> | | NodeJS_Dark | <NodeJS_Dark /> | | NodeJS_Light | <NodeJS_Light /> | | NuxtJS_Dark | <NuxtJS_Dark /> | | NuxtJS_Light | <NuxtJS_Light /> | | OCaml | <OCaml /> | | Octave_Dark | <Octave_Dark /> | | Octave_Light | <Octave_Light /> | | OpenShift | <OpenShift /> | | OpenStack_Dark | <OpenStack_Dark /> | | OpenStack_Light | <OpenStack_Light /> | | PHP_Dark | <PHP_Dark /> | | PHP_Light | <PHP_Light /> | | Perl | <Perl /> | | Photoshop | <Photoshop /> | | Plan9_Dark | <Plan9_Dark /> | | Plan9_Light | <Plan9_Light /> | | PlanetScale_Dark | <PlanetScale_Dark /> | | PlanetScale_Light | <PlanetScale_Light /> | | PostgreSQL_Dark | <PostgreSQL_Dark /> | | PostgreSQL_Light | <PostgreSQL_Light /> | | Postman | <Postman /> | | Powershell_Dark | <Powershell_Dark /> | | Powershell_Light | <Powershell_Light /> | | Premiere | <Premiere /> | | Prisma | <Prisma /> | | Processing_Dark | <Processing_Dark /> | | Processing_Light | <Processing_Light /> | | Prometheus | <Prometheus /> | | Pug_Dark | <Pug_Dark /> | | Pug_Light | <Pug_Light /> | | PyTorch_Dark | <PyTorch_Dark /> | | PyTorch_Light | <PyTorch_Light /> | | Python_Dark | <Python_Dark /> | | Python_Light | <Python_Light /> | | QT_Dark | <QT_Dark /> | | QT_Light | <QT_Light /> | | ROS_Dark | <ROS_Dark /> | | ROS_Light | <ROS_Light /> | | R_Dark | <R_Dark /> | | R_Light | <R_Light /> | | RabbitMQ_Dark | <RabbitMQ_Dark /> | | RabbitMQ_Light | <RabbitMQ_Light /> | | Rails | <Rails /> | | RaspberryPi_Dark | <RaspberryPi_Dark /> | | RaspberryPi_Light | <RaspberryPi_Light /> | | React_Dark | <React_Dark /> | | React_Light | <React_Light /> | | ReactiveX_Dark | <ReactiveX_Dark /> | | ReactiveX_Light | <ReactiveX_Light /> | | Redis_Dark | <Redis_Dark /> | | Redis_Light | <Redis_Light /> | | Redux | <Redux /> | | Regex_Dark | <Regex_Dark /> | | Regex_Light | <Regex_Light /> | | Remix_Dark | <Remix_Dark /> | | Remix_Light | <Remix_Light /> | | Replit_Dark | <Replit_Dark /> | | Replit_Light | <Replit_Light /> | | Rocket | <Rocket /> | | RollupJS_Dark | <RollupJS_Dark /> | | RollupJS_Light | <RollupJS_Light /> | | Ruby | <Ruby /> | | Rust | <Rust /> | | SQLite | <SQLite /> | | SVG_Dark | <SVG_Dark /> | | SVG_Light | <SVG_Light /> | | Sass | <Sass /> | | Scala_Dark | <Scala_Dark /> | | Scala_Light | <Scala_Light /> | | Selenium | <Selenium /> | | Sentry | <Sentry /> | | Sequelize_Dark | <Sequelize_Dark /> | | Sequelize_Light | <Sequelize_Light /> | | Sketchup_Dark | <Sketchup_Dark /> | | Sketchup_Light | <Sketchup_Light /> | | SolidJS_Dark | <SolidJS_Dark /> | | SolidJS_Light | <SolidJS_Light /> | | Solidity | <Solidity /> | | Spring_Dark | <Spring_Dark /> | | Spring_Light | <Spring_Light /> | | StackOverflow_Dark | <StackOverflow_Dark /> | | StackOverflow_Light | <StackOverflow_Light /> | | StyledComponents | <StyledComponents /> | | Supabase_Dark | <Supabase_Dark /> | | Supabase_Light | <Supabase_Light /> | | Svelte | <Svelte /> | | Swift | <Swift /> | | Symfony_Dark | <Symfony_Dark /> | | Symfony_Light | <Symfony_Light /> | | TailwindCSS_Dark | <TailwindCSS_Dark /> | | TailwindCSS_Light | <TailwindCSS_Light /> | | Tauri_Dark | <Tauri_Dark /> | | Tauri_Light | <Tauri_Light /> | | TensorFlow_Dark | <TensorFlow_Dark /> | | TensorFlow_Light | <TensorFlow_Light /> | | ThreeJS_Dark | <ThreeJS_Dark /> | | ThreeJS_Light | <ThreeJS_Light /> | | Twitter | <Twitter /> | | TypeScript | <TypeScript /> | | Unity_Dark | <Unity_Dark /> | | Unity_Light | <Unity_Light /> | | UnrealEngine | <UnrealEngine /> | | VIM_Dark | <VIM_Dark /> | | VIM_Light | <VIM_Light /> | | VSCode_Dark | <VSCode_Dark /> | | VSCode_Light | <VSCode_Light /> | | V_Dark | <V_Dark /> | | V_Light | <V_Light /> | | Vala | <Vala /> | | Vercel_Dark | <Vercel_Dark /> | | Vercel_Light | <Vercel_Light /> | | VisualStudio_Dark | <VisualStudio_Dark /> | | VisualStudio_Light | <VisualStudio_Light /> | | Vite_Dark | <Vite_Dark /> | | Vite_Light | <Vite_Light /> | | VueJS_Dark | <VueJS_Dark /> | | VueJS_Light | <VueJS_Light /> | | WebAssembly | <WebAssembly /> | | Webflow | <Webflow /> | | Webpack_Dark | <Webpack_Dark /> | | Webpack_Light | <Webpack_Light /> | | WindiCSS_Dark | <WindiCSS_Dark /> | | WindiCSS_Light | <WindiCSS_Light /> | | Wordpress | <Wordpress /> | | Workers_Dark | <Workers_Dark /> | | Workers_Light | <Workers_Light /> | | XD | <XD /> | | Zig_Dark | <Zig_Dark /> | | Zig_Light | <Zig_Light /> |

Props

className: Apply custom CSS classes for styling the icons.

<Github_Dark className="icon">

Related

Here is the original author of Skill Icons

Tandpfun