antfu/icones

⚡️ Icon Explorer with Instant searching, powered by Iconify

icones's Issues

Icons may overflow on small viewports

Describe the bug

Reproduction

https://icones.js.org/collection/logos

System Info

Chrome 103 on macOS 12.5

Used Package Manager

n/a

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

[Feature Request] Configure prefix & list of collection IDs

Thanks ton for icones, its awesome.

I know I can fork, customise & host, but while accessing it online, it will be very helpful for everyone to configure (persist in local-storage):

• prefix, so that "name-copying-mode" will copy it with prefix (for eg, i-mdi:home or icon-mdi:home instead of just mdi:home), so that we can paste straight in our apps
• collection-ids - subset of collection-ids, so that we could just view & search only the ones we use (in the "All" iconset)

Global icon search option

Hey @antfu, thank you so much for this project. This is so useful. 🚀

This is a suggestion to add a global search option that will show results across all icon packs for the given query. This will be handy to select an icon comparing across all the packs.

Thanks again.

window.JSZip is not a constructor

There is a bug when trying to download a bag of icons as zip.
Browser is Chrome 84

Steps to reproduce:

1. Add icons to your bag
2. Click Download SVGs Zip

And of course thanks for this project - it's wonderful 😃

electron-webpack is looking for src/render/index

`> [email protected] compile /Users/****/WWW/icones/electron

electron-webpack

Error: Cannot find entry file src/renderer/index.ts (or main.ts, or app.ts, or index.js, or main.js, or app.js)
at computeEntryFile (/Users//WWW/icones/node_modules/.pnpm/[email protected][email protected]/node_modules/electron-webpack/src/main.ts:389:11)
at WebpackConfigurator.configure (/Users//WWW/icones/node_modules/.pnpm/[email protected][email protected]/node_modules/electron-webpack/src/main.ts:222:29)
at configure (/Users/****/WWW/icones/node_modules/.pnpm/[email protected][email protected]/node_modules/electron-webpack/src/main.ts:376:10)
 ERROR  Command failed with exit code 1.`

Allow to copy JSX only (instead of a React component)

How to improve the experience of many icons rendering in web?

Clear and concise description of the problem

I am definitely an icons lover. Thanks a lot for this project!
I browse the fluent-emoji and click load all, the page scrolls stutteringly and my Chrome will crash with out of memory.
Meanwhile browsing other grayscale icons, solid color icons, the experience is good!
In my experience, I use innerHTML to load many svg icons in a single page, then the page animation will also drop frames.

Suggested solution

Apart of using virtual grid, I have no ideal to optimize.
So I'm asking here and listening for other inspiration!
Thank you!

Request - Tabler Icons

Love the project! Just thought I'd request Tabler Icons to the list if you plan on adding more to the set.

Large icons are smaller

Large icons are has become smaller than small icons.

React (TS): The viewbox attribute should be cammelCase

If you copy the React + Typescript version it won't have the viewbox property in camel case.

Adding license information in SVG

When you click on a snippet like "SVG", that give you:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--fa-solid" width="28" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 448 512"><path d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495L69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z" fill="currentColor"></path></svg>

And we lost the license tracking,
But if y copy it from font awesome official website:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z"/></svg>

Feature request: Include icons for Chakra UI

Here's a bunch of icons I'd love to see in icones: https://chakra-ui.com/docs/media-and-icons/icon#using-chakra-ui-icons

Property 'baseURI' does not exist on type 'Window & typeof globalThis'.

Anthony how did you manage to get vscode to recognize your types? I keep getting Property 'baseURI' does not exist on type 'Window & typeof globalThis even though I have created window.d.ts

Copying icons as px

When copying an icon its width and height are like that:

width="1em" height="1em"

An option to copy it like that would be awesome.

width="16" height="16"

Motivation: When pasting that icon into Figma, it thinks its width and height as 1.

Theme Question

Hi there! Apologies in advance if this is irrelevant. I just really liked the look of the app. I was wondering did you use any theme out of the box of tailwind or did you handcraft it? Thanks.

Auto Update

Could you please consider auto update icon collections everyday? (if icons changed)

"overflow-y: overlay" is not supported in Firefox

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#Values

overlay
Only supported in WebKit-based (e.g., Safari) and Blink-based (e.g., Chrome or Opera) browsers.

i'm using firefox, so i can't scroll down😢

Feature request: Copy as png

This would be tremendously useful in powerpoint presentations, google docs, gmail, etc, here's some JS code which converts PNG to SVG (I can work on a PR in a bit):

function toPng(svgHTML) {
	return new SvgToPngConverter().convert(
		`data:image/svg+xml;base64,${btoa(svgHTML)}`
	);
}

class SvgToPngConverter {
	constructor() {
		this._init = this._init.bind(this);
		this._cleanUp = this._cleanUp.bind(this);
		this.convertFromInput = this.convert.bind(this);
	}

	_init() {
		this.canvas = document.createElement("canvas");
		this.imgPreview = document.createElement("img");
		this.imgPreview.style = "position: absolute; top: -9999px";

		document.body.appendChild(this.imgPreview);
		this.canvasCtx = this.canvas.getContext("2d");
	}

	_cleanUp() {
		document.body.removeChild(this.imgPreview);
	}
	//Maybe take from viewbox or computed styles for width and height when copying?
	convert(input, { width = 128, height = 128 } = {}) {
		return new Promise((callback) => {
			this._init();
			let _this = this;
			this.imgPreview.onload = function () {
				const img = new Image();
				_this.canvas.width = width;
				_this.canvas.height = height;
				img.crossOrigin = "anonymous";
				img.src = _this.imgPreview.src;
				img.onload = function () {
					_this.canvasCtx.drawImage(img, 0, 0, width, height);
					let imgData = _this.canvas.toDataURL("image/png");
					if (typeof callback == "function") {
						callback(imgData);
					}
					_this._cleanUp();
				};
			};

			this.imgPreview.src = input;
		});
	}
}

How to increase the svg size in vue??

size of SVG not increasing

Unclear which prefix to use whilst browsing a specific library

First of all, really awesome repo :)

When I'm looking through a library, for example Font Awesome 5 Solid, I can't see which prefix to use with these icons:

So when I want to use abacus, I need to search through the All category, which gives me the following tooltip, including the shown prefix:

It would be really nice to see the library prefix on the library page itself, or atleast within the tooltip like it is showing when searching through All.

[suggestion] Enable user to view/export icons in other colors

I love to use this application for exploring icons, and use them through URL on Notion, for example

Being able to see and export icons in other colors would be pretty neat :]

The user should be able to:

• Select icons' color all at once (just saw you can preview the icon with different colors)
• Export icon with the selected color as dataURL (currently it exports as black)

vite-plugin-voie is not maintained anymore

It looks like vite-plugin-voie is no longer actively maintained. We should switch to vite-plugin-pages instead

Icon tooltips may be covered by the sidebar

Describe the bug

Reproduction

https://icones.js.org/collection/ic?s=javascript

System Info

Chrome 103 on macOS 12.5

Used Package Manager

n/a

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

feature request: generate unplugin-icons snippet to be directly copied

Although there are options to directly get various types of snippets including names and svg, it will be great if it can also have autogenerated snippets relating to their usage in Unplugin Icons

Something like this can be generated easily imo without much problem -

import IconAccountBox from '~icons/mdi/account-box';

When in use with unplugin-icons, I only need the name of the component like 'MdiLightAlarmPlus'

When using unplugin-icons, my flow is:

1. Find an icon on icones
2. Click "Vue" under the components section
3. Paste the copied component into my editor
4. Copy the component name from the snippet's export
5. Then use it like a component <MdiLightAlarmPlus/>

Ideal flow would be:

1. Find an icon
2. Click a button that copies the text MdiLightAlarmPlus
3. Use it like a component

I'm open to making a PR for this, just wanted to ask before doing so to see if there would be a preferred implementation for it.

Wrong (unrelated) search result

Just trying to find an icon in Material Design Icons with a keyword user, but it showing unrelated results.

And I try to compare it with MDI Explorer and from the site https://materialdesignicons.com which get a better results.

Here is the screenshots.

Use tauri.rs (instead of electron) to build desktop apps.

You are planning to create electron client, instead of using electron, i would recommend you to use tauri.rs to build cross platform desktop application.

Main benefit of using tauri.rs is that it is built using rust so, performance is no issue, moreover the build (release) size of an electron app is too big.

Minimum size of electron varies from 50mb to 70mb as far as i have seem

But tauri gives u minimum size oh 600kb

I would also like to contribute if u use tauri 😁

Workbox fetch error

The icones.js.org site is throwing a workbox fetch error, and sometime the site becomes unresponsive. It use to work fine 3 days ago. Not sure if it's related to the workbox fetch error though.

Thank you!

Add govicons.io

Clear and concise description of the problem

http://govicons.io/ a whole bunch of font-awesome type icons for government use...

Suggested solution

http://govicons.io/

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

👀Request support element-plus icon

Hey, I saw in iconify that the element-plus icon is already supported, when will icons support it, thank you

Having Firefox recognize search field

On Firefox, on most websites, it's possible to right click the search field and select "Add a Keyword for this search". Sites like IMDB, Youtube, Github etc.

This enables me to more start typing a search term right from my url bar:

More info: https://support.mozilla.org/en-US/kb/how-search-from-address-bar

I think this could be enabled by:

1. Allowing searching using a query parameter (?q=searchterm). Currently searching only works using: /apps/search/searchterm. (I understand this is a big ask)
2. Adding a <form action="/apps/"> element around the input field. This will make Firefox recognize it as a search.
3. Giving the input the name of the query argument name="q" for example.

CSS file Missing

https://d33wubrfki0l68.cloudfront.net/css/df63ff0ba9fa2d267f10200f991187c694b39ef5/assets/index.178bdaef.css
Visit https://icones.js.org/ and find that the CSS file resource is missing and cannot be accessed

useThrottle not working or time is short in Search?

Hi antfu!

When selecting "all collections" and searching the UI thread is slow, correct me if I'm wrong, but it doesn't seem to be working as it should in this case, or should I increase the time?

Always with great tools! I admire you!

No more work on safari/mac

Describe the bug

error with blank page on safari :
TypeError: Object.hasOwn is not a function. (In 'Object.hasOwn(r.prototype,n)', 'Object.hasOwn' is undefined)

Reproduction

run safari browser with the https://icones.js.org

System Info

OSX 10.14.6 / Safari 14.1.2
but work on opera, chrome and firefox mac

Used Package Manager

n/a

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Download zip functionality broken on website

Icones VS Code extension

Hey @antfu 👋🏻

I made a VS Code extension to search and copy icons without leaving code editor. The extension renders a webview of a forked icones.netlify.app site.

Here's the source code for the extension. I would love to know your thoughts on this.

And here's the published extension: https://marketplace.visualstudio.com/items?itemName=afzalsayed96.icones

Error when visiting /collection/all

Problem
When visiting https://icones.js.org/collection/all the site never loads the icons and there is an error in the console.

It looks like this bug is due to a recent commit where the out dir for collections-meta.json was changed from /public to /src/data. So when /collection/all attempts to fetch collections-meta.json it returns a 404.

See here:
87c9b53#diff-1b976065307aee449f4c628c5115b270fd2335428bb72ccb1f5a62a9233a30beR56-R58

Feature request: tooltips when hovering over icons

Hello! Could you add tooltips when hovering over icons? I would just like to quickly see the name of the icon, without opening it separately by pressing and without being distracted from the rest of the icons. I'm talking about something like this is implemented in Material Design Icons:

Add new icons

Hy i like this project a lot but i ask if there is new icons and new style ⚡👋

Website seems to be down

Hey @antfu , I love this website!

Both https://icones.netlify.app and https://icones.js.org seem to be down, they are showing a blank screen. No errors in the console though, and the network requests seem to be ok.

Thanks!

Website down

Add iconsax

Request add new icon package.

iconsax the official icons of the Vuesax framework.

Iconsax WebSite

GitHub Repo

License

https://iconsax.io/#license

Output valid React JSX

It should convert kebab-case like stroke-width to camelCase 🤔

React Typescript component exported with wrong types

Exporting an icon with the React TS option gave the following code.

<SVGSVGElement> should be <SVGElement>

export function IconParkOutlineTeaDrink(props: SVGProps<SVGSVGElement>) {
  return (
    <svg width="1em" height="1em" viewBox="0 0 48 48" {...props}><g fill="none" stroke="currentColor" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round"><path clipRule="evenodd" d="M2 20c0 12.15 6 22 18 22s18-9.85 18-22H2z"></path><path d="M20 14V6"></path><path d="M30 14v-4"></path><path d="M10 14v-4"></path><path d="M36.19 30.623c.99-2.584 1.574-5.486 1.752-8.572c.345-.034.698-.051 1.058-.051c3.866 0 7 2.015 7 4.5S42.866 31 39 31c-1 0-1.95-.135-2.81-.377z"></path></g></svg>
  )
}

Hidden icon sets

It appears Mono Icons were added twice: in mi.json and mono-icons.json: iconify/icon-sets#21

To fix that issue, I've added hidden boolean property to IconifyInfo type (types and info conversion function in utils have been updated as well) and latest version of @iconify/json package contains hidden property for mono-icons:

	"mono-icons": {
		"name": "Mono Icons",
		"total": 180,
		"author": "Mono",
		"url": "https://github.com/mono-company/mono-icons",
		"license": "MIT",
		"licenseURL": "https://github.com/mono-company/mono-icons/blob/master/LICENSE.md",
		"height": 24,
		"samples": [
			"user",
			"log-in",
			"play"
		],
		"version": "1.3.1",
		"palette": "Colorless",
		"category": "General",
		"hidden": true
	},

So icon set is still there to avoid breaking people's UI, but it is hidden so it no longer should appear in icon sets list.

Add Svelte to supported frameworks

Order Icon Packs alphabetically or add option to do so

Clear and concise description of the problem

Right now we obviously have a way to search through all icons which works great. Sometimes though you might also want to look for icon packs, for example if you limit your design system to only a few packs, want to quickly lookup the prefix of a pack, or have a general idea of how the pack is called but don't know its exact name, etc. Currently though the Icon packs seem to be sorted in a completely arbitrary order, so finding a specific one gets annoying.

Suggested solution

Sort the icon packs in both the home view and the sidebar in alphabetical order. Could also go further and add a setting for a "sort mode" where you could set the way icon packs should be ordered (e.g. by name, size, etc.), similar to how there is a "Size" display option for icons.

Alternative

You could use the browser built-in search (CTRL-F) but that gets finnicky, plus it wouldn't really help if you don't know a packs' exact name.

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Support OpenSearch

The OpenSearch description format lets a website describe a search engine for itself, so that a browser or other client application can use that search engine. OpenSearch is supported by (at least) Firefox, Edge, Internet Explorer, Safari, and Chrome.

More info: https://developer.mozilla.org/en-US/docs/Web/OpenSearch

Screenshots of using this in Firefox:

<symbol>

Beautiful app 😍 Are there any plans for SVG sprites with <symbol> tags, like IcoMoon has?

[Feature request] Service worker to make it PWA installable

There would be a few ways to do this:

• Simply cache the giant icons JSON file using the service worker, done!
• Dynamically cache when stuff is requested + Manually cache with the cache action

This should probably do the trick though:

const dynamicCacheName = 'site-dynamic-v1';
const assets = [/* All static assets, like styles, HTML pages, etc here */]
// activate event
self.addEventListener('activate', evt => {
	evt.waitUntil(
    caches.open(dynamicCacheName).then((cache) => {
      cache.addAll(assets);
    })
  );
  evt.waitUntil(
    caches.keys().then(keys => {
      return Promise.all(keys
        .filter(key =>  key !== dynamicCacheName)
        .map(key => caches.delete(key))
      );
    })
  );
});
// fetch event
self.addEventListener('fetch', evt => {
  evt.respondWith(
    caches.match(evt.request).then(cacheRes => {
      return cacheRes || fetch(evt.request).then(fetchRes => {
        return caches.open(dynamicCacheName).then(cache => {
          cache.put(evt.request.url, fetchRes.clone());
          return fetchRes;
        })
      });
    })
  );
});