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

• Tandpfun tandpfun/skill-icons
• willywdev willywdev/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.