Security News
The Changelog Podcast: Practical Steps to Stay Safe on npm
Learn the essential steps every developer should take to stay secure on npm and reduce exposure to supply chain attacks.
By Sarah Gooding - Oct 31, 2025
🚀 DAY 5 OF LAUNCH WEEK: Introducing Socket Firewall Enterprise.Learn more →
@fdorantesm/react-skill-icons
Advanced tools
React Skill Icons
React components for skillicons.dev
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 /> | |
| 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 /> | |
| 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 /> | |
| 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.
FAQs
React components for skillicons.dev by tandpfun
We found that @fdorantesm/react-skill-icons demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 19 Oct 2025
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Security Community Slams MIT-linked Report Claiming AI Powers 80% of Ransomware
Experts push back on new claims about AI-driven ransomware, warning that hype and sponsored research are distorting how the threat is understood.
By Sarah Gooding - Oct 30, 2025
Security News
Ruby Core Team Assumes Stewardship of RubyGems and Bundler, Former Maintainers Offer to Transfer All Rights to Matz
Ruby's creator Matz assumes control of RubyGems and Bundler repositories while former maintainers agree to step back and transfer all rights to end the dispute.
By Sarah Gooding - Oct 29, 2025