Skip to content

fdorantesm/react-skill-icons

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Skill Icons


React components for skillicons.dev


Stars Badge Forks Badge Pull Requests Badge Issues Badge GitHub contributors License Badge

Installation

Install with npm

  npm install @fdorantesm/react-skill-icons

Install with yarn

  yarn add @fdorantesm/react-skill-icons

Install with pnpm

  pnpm install @fdorantesm/react-skill-icons

Install with bun

  bun add @fdorantesm/react-skill-icons

Usage

import { GithubDark, JavaScript, ReactDark } from "@fdorantesm/react-skill-icons";

function App() {
  return (
    <div>
      <GithubDark />
      <JavaScript />
      <ReactDark />
    </div>
  );
}

export default App;

Available Icons

To see all Icons visit skillicons.dev

Icon Name Usage
AWSDark <AWSDark />
AWSLight <AWSLight />
AbletonDark <AbletonDark />
AbletonLight <AbletonLight />
ActivityPubDark <ActivityPubDark />
ActivityPubLight <ActivityPubLight />
ActixDark <ActixDark />
ActixLight <ActixLight />
Adonis <Adonis />
AfterEffects <AfterEffects />
AiScriptDark <AiScriptDark />
AiScriptLight <AiScriptLight />
AlpineJSDark <AlpineJSDark />
AlpineJSLight <AlpineJSLight />
AndroidStudioDark <AndroidStudioDark />
AndroidStudioLight <AndroidStudioLight />
AngularDark <AngularDark />
AngularLight <AngularLight />
Ansible <Ansible />
Apollo <Apollo />
Appwrite <Appwrite />
Arduino <Arduino />
Astro <Astro />
Atom <Atom />
Audition <Audition />
AutoCADDark <AutoCADDark />
AutoCADLight <AutoCADLight />
Azul <Azul />
AzureDark <AzureDark />
AzureLight <AzureLight />
BSDDark <BSDDark />
BSDLight <BSDLight />
Babel <Babel />
BashDark <BashDark />
BashLight <BashLight />
BevyDark <BevyDark />
BevyLight <BevyLight />
BlenderDark <BlenderDark />
BlenderLight <BlenderLight />
Bootstrap <Bootstrap />
C <C />
CMakeDark <CMakeDark />
CMakeLight <CMakeLight />
CPP <CPP />
CS <CS />
CSS <CSS />
CassandraDark <CassandraDark />
CassandraLight <CassandraLight />
ClojureDark <ClojureDark />
ClojureLight <ClojureLight />
CloudflareDark <CloudflareDark />
CloudflareLight <CloudflareLight />
CodePenDark <CodePenDark />
CodePenLight <CodePenLight />
CoffeeScriptDark <CoffeeScriptDark />
CoffeeScriptLight <CoffeeScriptLight />
CrystalDark <CrystalDark />
CrystalLight <CrystalLight />
D3Dark <D3Dark />
D3Light <D3Light />
DENODark <DENODark />
DENOLight <DENOLight />
DartDark <DartDark />
DartLight <DartLight />
DevToDark <DevToDark />
DevToLight <DevToLight />
Discord <Discord />
DiscordBots <DiscordBots />
Django <Django />
Docker <Docker />
DotNet <DotNet />
DynamoDBDark <DynamoDBDark />
DynamoDBLight <DynamoDBLight />
EclipseDark <EclipseDark />
EclipseLight <EclipseLight />
Electron <Electron />
ElixirDark <ElixirDark />
ElixirLight <ElixirLight />
Emacs <Emacs />
Ember <Ember />
EmotionDark <EmotionDark />
EmotionLight <EmotionLight />
ExpressJSDark <ExpressJSDark />
ExpressJSLight <ExpressJSLight />
FastAPI <FastAPI />
FediverseDark <FediverseDark />
FediverseLight <FediverseLight />
FigmaDark <FigmaDark />
FigmaLight <FigmaLight />
FirebaseDark <FirebaseDark />
FirebaseLight <FirebaseLight />
FlaskDark <FlaskDark />
FlaskLight <FlaskLight />
FlutterDark <FlutterDark />
FlutterLight <FlutterLight />
Forth <Forth />
Fortran <Fortran />
GCPDark <GCPDark />
GCPLight <GCPLight />
GTKDark <GTKDark />
GTKLight <GTKLight />
GameMakerStudio <GameMakerStudio />
Gatsby <Gatsby />
GherkinDark <GherkinDark />
GherkinLight <GherkinLight />
Git <Git />
GitLabDark <GitLabDark />
GitLabLight <GitLabLight />
GithubActionsDark <GithubActionsDark />
GithubActionsLight <GithubActionsLight />
GithubDark <GithubDark />
GithubLight <GithubLight />
GoLang <GoLang />
GodotDark <GodotDark />
GodotLight <GodotLight />
GradleDark <GradleDark />
GradleLight <GradleLight />
GrafanaDark <GrafanaDark />
GrafanaLight <GrafanaLight />
GraphQLDark <GraphQLDark />
GraphQLLight <GraphQLLight />
Gulp <Gulp />
HTML <HTML />
HaskellDark <HaskellDark />
HaskellLight <HaskellLight />
HaxeFlixelDark <HaxeFlixelDark />
HaxeFlixelLight <HaxeFlixelLight />
HaxeDark <HaxeDark />
HaxeLight <HaxeLight />
Heroku <Heroku />
HibernateDark <HibernateDark />
HibernateLight <HibernateLight />
IPFSDark <IPFSDark />
IPFSLight <IPFSLight />
IdeaDark <IdeaDark />
IdeaLight <IdeaLight />
Illustrator <Illustrator />
Instagram <Instagram />
JQuery <JQuery />
JavaScript <JavaScript />
JavaDark <JavaDark />
JavaLight <JavaLight />
JenkinsDark <JenkinsDark />
JenkinsLight <JenkinsLight />
Jest <Jest />
JuliaDark <JuliaDark />
JuliaLight <JuliaLight />
Kafka <Kafka />
KotlinDark <KotlinDark />
KotlinLight <KotlinLight />
KtorDark <KtorDark />
KtorLight <KtorLight />
Kubernetes <Kubernetes />
LaTeXDark <LaTeXDark />
LaTeXLight <LaTeXLight />
LaravelDark <LaravelDark />
LaravelLight <LaravelLight />
LinkedIn <LinkedIn />
LinuxDark <LinuxDark />
LinuxLight <LinuxLight />
LitDark <LitDark />
LitLight <LitLight />
LuaDark <LuaDark />
LuaLight <LuaLight />
MarkdownDark <MarkdownDark />
MarkdownLight <MarkdownLight />
MastodonDark <MastodonDark />
MastodonLight <MastodonLight />
MaterialUIDark <MaterialUIDark />
MaterialUILight <MaterialUILight />
MatlabDark <MatlabDark />
MatlabLight <MatlabLight />
MavenDark <MavenDark />
MavenLight <MavenLight />
MisskeyDark <MisskeyDark />
MisskeyLight <MisskeyLight />
MongoDB <MongoDB />
MySQLDark <MySQLDark />
MySQLLight <MySQLLight />
NeoVimDark <NeoVimDark />
NeoVimLight <NeoVimLight />
NestJSDark <NestJSDark />
NestJSLight <NestJSLight />
NetlifyDark <NetlifyDark />
NetlifyLight <NetlifyLight />
NextJSDark <NextJSDark />
NextJSLight <NextJSLight />
Nginx <Nginx />
NimDark <NimDark />
NimLight <NimLight />
NodeJSDark <NodeJSDark />
NodeJSLight <NodeJSLight />
NuxtJSDark <NuxtJSDark />
NuxtJSLight <NuxtJSLight />
OCaml <OCaml />
OctaveDark <OctaveDark />
OctaveLight <OctaveLight />
OpenShift <OpenShift />
OpenStackDark <OpenStackDark />
OpenStackLight <OpenStackLight />
PHPDark <PHPDark />
PHPLight <PHPLight />
Perl <Perl />
Photoshop <Photoshop />
Plan9Dark <Plan9Dark />
Plan9Light <Plan9Light />
PlanetScaleDark <PlanetScaleDark />
PlanetScaleLight <PlanetScaleLight />
PostgreSQLDark <PostgreSQLDark />
PostgreSQLLight <PostgreSQLLight />
Postman <Postman />
PowershellDark <PowershellDark />
PowershellLight <PowershellLight />
Premiere <Premiere />
Prisma <Prisma />
ProcessingDark <ProcessingDark />
ProcessingLight <ProcessingLight />
Prometheus <Prometheus />
PugDark <PugDark />
PugLight <PugLight />
PyTorchDark <PyTorchDark />
PyTorchLight <PyTorchLight />
PythonDark <PythonDark />
PythonLight <PythonLight />
QTDark <QTDark />
QTLight <QTLight />
ROSDark <ROSDark />
ROSLight <ROSLight />
RDark <RDark />
RLight <RLight />
RabbitMQDark <RabbitMQDark />
RabbitMQLight <RabbitMQLight />
Rails <Rails />
RaspberryPiDark <RaspberryPiDark />
RaspberryPiLight <RaspberryPiLight />
ReactDark <ReactDark />
ReactLight <ReactLight />
ReactiveXDark <ReactiveXDark />
ReactiveXLight <ReactiveXLight />
RedisDark <RedisDark />
RedisLight <RedisLight />
Redux <Redux />
RegexDark <RegexDark />
RegexLight <RegexLight />
RemixDark <RemixDark />
RemixLight <RemixLight />
ReplitDark <ReplitDark />
ReplitLight <ReplitLight />
Rocket <Rocket />
RollupJSDark <RollupJSDark />
RollupJSLight <RollupJSLight />
Ruby <Ruby />
Rust <Rust />
SQLite <SQLite />
SVGDark <SVGDark />
SVGLight <SVGLight />
Sass <Sass />
ScalaDark <ScalaDark />
ScalaLight <ScalaLight />
Selenium <Selenium />
Sentry <Sentry />
SequelizeDark <SequelizeDark />
SequelizeLight <SequelizeLight />
SketchupDark <SketchupDark />
SketchupLight <SketchupLight />
SolidJSDark <SolidJSDark />
SolidJSLight <SolidJSLight />
Solidity <Solidity />
SpringDark <SpringDark />
SpringLight <SpringLight />
StackOverflowDark <StackOverflowDark />
StackOverflowLight <StackOverflowLight />
StyledComponents <StyledComponents />
SupabaseDark <SupabaseDark />
SupabaseLight <SupabaseLight />
Svelte <Svelte />
Swift <Swift />
SymfonyDark <SymfonyDark />
SymfonyLight <SymfonyLight />
TailwindCSSDark <TailwindCSSDark />
TailwindCSSLight <TailwindCSSLight />
TauriDark <TauriDark />
TauriLight <TauriLight />
TensorFlowDark <TensorFlowDark />
TensorFlowLight <TensorFlowLight />
ThreeJSDark <ThreeJSDark />
ThreeJSLight <ThreeJSLight />
Twitter <Twitter />
TypeScript <TypeScript />
UnityDark <UnityDark />
UnityLight <UnityLight />
UnrealEngine <UnrealEngine />
VIMDark <VIMDark />
VIMLight <VIMLight />
VSCodeDark <VSCodeDark />
VSCodeLight <VSCodeLight />
VDark <VDark />
VLight <VLight />
Vala <Vala />
VercelDark <VercelDark />
VercelLight <VercelLight />
VisualStudioDark <VisualStudioDark />
VisualStudioLight <VisualStudioLight />
ViteDark <ViteDark />
ViteLight <ViteLight />
VueJSDark <VueJSDark />
VueJSLight <VueJSLight />
WebAssembly <WebAssembly />
Webflow <Webflow />
WebpackDark <WebpackDark />
WebpackLight <WebpackLight />
WindiCSSDark <WindiCSSDark />
WindiCSSLight <WindiCSSLight />
Wordpress <Wordpress />
WorkersDark <WorkersDark />
WorkersLight <WorkersLight />
XD <XD />
ZigDark <ZigDark />
ZigLight <ZigLight />

Props

className: Apply custom properties supported by SVGSVGElement type.

<GithubDark className="icon" />

Credits

Authors of skillicons.dev and react-skillicons

Changes

I make some improvements like pull the icons from the original source github:tandpfun/skill-icons and then generate automatically all the components to avoid import svg files.

Feel free to fork this repo to generate more svg packages.