React-Skillicons
Use Skill Icons by tandpfun in React!
Installation
Install with npm
npm install react-skilliconsUsage/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 /> |
|
| 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 /> |
|
| 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 /> |
|
| 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