React components for skillicons.dev
Install with npm
npm install @fdorantesm/react-skill-iconsInstall with yarn
yarn add @fdorantesm/react-skill-iconsInstall with pnpm
pnpm install @fdorantesm/react-skill-iconsInstall with bun
bun add @fdorantesm/react-skill-iconsimport { GithubDark, JavaScript, ReactDark } from "@fdorantesm/react-skill-icons";
function App() {
return (
<div>
<GithubDark />
<JavaScript />
<ReactDark />
</div>
);
}
export default App;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 /> |
className: Apply custom properties supported by SVGSVGElement type.
<GithubDark className="icon" />Authors of skillicons.dev and react-skillicons
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.