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 install @vastjs/cyber-icons-react

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>
}

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

npm install @vastjs/cyber-icons-vue

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
• stellar
• eclipse
• twilight
• jupiter
• spacex

  <ApplicationsEngineering theme="spacex" />

Custom Color

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

you can pass pixels, ems, etc

  <ApplicationsEngineering size="2.6em" />

Stroke

you can pass pixels, ems, etc

  <ApplicationsEngineering stroke="4px" />