cyber-icons

+280 Free SVG cyberpunk icons. Contributions, corrections & requests can be made on GitHub.

Demo: https://cyber-icons-demo.vercel.app/

---

Next steps:

• +100 futuristics svg icons components (and more after)
• Angular Lib
• Svelte Lib

Install

React

https://www.npmjs.com/package/@vastjs/cyber-icons-react

npm

npm install @vastjs/cyber-icons-react

yarn

yarn add @vastjs/cyber-icons-react

Usage, React / React + TS / Nextjs / etc

// Threeshakable
import { ApplicationsEngineering } from '@vastjs/cyber-icons-react'


export default function Home() {

 return (
    <div>
      <ApplicationsEngineering size="42px" />
    </div>
}

Vue

https://www.npmjs.com/package/@vastjs/cyber-icons-vue

npm

npm install @vastjs/cyber-icons-vue

yarn

yarn add @vastjs/cyber-icons-vue

Usage Vue3

// plugins/CyberIcons.ts
import { FaceAngel, FaceAngry } from 'cyber-icons-vue';

export default {
  install: (app: any, options: any) => {
    app.component("FaceAngel", FaceAngel);
    app.component("FaceAngry", FaceAngry);
    // other icons...
  },
};

// your component 
<template>
  <FaceAngry />
</template>

Usage Nuxt 3

// plugins/cyber-icons.client.js
import { FaceAngel } from '@vastjs/cyber-icons-vue';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component("FaceAngel", FaceAngel);
  // others...
})

// your component 
<template>
  <FaceAngry />
</template>

Options

Themes

• default
• soft
• stellar
• eclipse
• twilight
• jupiter
• mars
• spacex
• dark

  <ApplicationsEngineering theme="spacex" />

Custom Color

  <ApplicationsEngineering primary="#f50a0a" secondary="#f0e5e5" border="#fbff00" />

Size

you can pass pixels, ems, etc

  <ApplicationsEngineering size="2.6em" />

Stroke

you can pass pixels, ems, etc

  <ApplicationsEngineering stroke="4px" />