stunicons / stunicons

Stunning icons for your next web project

Stunicons

Burgeoning pack with 110+ highly customizable icons for your outstanding UI.

Installation

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/style.min.css"> 
// or
<link rel="stylesheet" href="https://unpkg.com/[email protected]/fonts/style.min.css"> 

NPM

npm i stunicons

YARN

yarn add stunicons

Documentation

After successful installation, Import the icon font in your global css file.

import 'stunicons/fonts/style.min.css'

//OR

import '/node_modules/stunicons/fonts/style.min.css'

Then, In your html

<i class="si-home"></i>

Usage/Examples

<style>
    import '/node-modules/stunicons/fonts/style.min.css';
</style>

<div class="icon">
    <i class="si-home"></i>
</div>

Demo

Stunicons Mashup

Icon Request

If you have any icon-request, please reach out to us by opening an issue here.

Check out a sample issue here.

Contributing

Contributions are always welcome!

See contributing.md to get started.

Please adhere to this project's code of conduct.

Epilogue

Made by Stunnity !

stunicons's Issues

bell-off icon request

Would like to request a bell icon

• icon name: bell-off

Here is a preview

[Icon]: Graduation cap

What icon do you request?

May you find for us here is the reference https://fontawesome.com/search?q=graduation%20cap&s=solid%2Cbrands)

[Icon]: Desktop

What icon do you request?

May you find for us here is the reference https://fontawesome.com/icons/desktop?s=solid

award icon request

we would like to request an award icon

we want it in your design system

down here is a reference

[Icon]: Puzzle-piece

What icon do you request?

May you find for us here is the reference https://fontawesome.com/icons/puzzle-piece?s=solid

bell icon request

Would like to request a bell icon

• icon name: bell

Here is a preview

Stunicons icons not loaded

Description

While I was playing with this library of icons, I used this library in making Figma plugin with but I could not load fonts to make the icon visible, just a rectangle was being shown

Visual proof

Environment

OS: Windows 10 pro WSL
browser: not an actual browser but Figma

I tried this

• downloaded file-loader loader to load my font files in app
• imported stunicons css in main app file

import { createApp } from 'vue'
import App from './ui.vue'
import 'stunicons/fonts/style.min.css'

createApp(App).mount('#app')

• and configured loader in webpack.config.js
  the way I was commanding webpack to load font files was this

	{ 
		test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/, 
		loader:'file-loader' ,
	},

[Icon]: Tick icon

What icon do you request?

May you find tick for us here is the reference

Correct icon name doesn't appear on click

The correct name of the icon doesn't appear on click.
Whenever I click on any icon, the name doesn't appear instead it always shows "Arrow Left"

Requesting Figma Icon

we want figma icon

[Icon]:

What icon do you request?

May you find a quotes icon for us here is the reference (https://www.flaticon.com/free-icon/left-quotes-sign_39711?term=quotes&page=1&position=1&origin=search&related_id=39711)

Manchester United Logo Icon

What icon do you request?

It wouldl be much better if we got icons for teams' logos

Requesting Icon

• Twitter

[Icon]: Figma Icon

What icon do you request?

May you find for us here is the refference

dollar-sign icon request

Would like to request an icon to use in my rfid-octo

• icon name: dollar-sign

Here is a preview

[Icon]: selector

What icon do you request?

May you find selector icon for us here is the reference

requesting an icon

I personally liked ur icons fr u did a great job.
in addition to different icons found so far on the site, I would like to request for a twitter and github icon.