I made an icon explorer!

[Explosion-Scratch]

I have created an icon explorer for this project with Svelte, view it here: https://svelte.dev/repl/e29cb982e5df4cbc8b80fdc9ad04cbe8?version=3.48.0

And a screen recording:

https://user-images.githubusercontent.com/61319150/172241957-d3487330-275c-4a5b-b1d6-9b1154ccc1cf.mp4

The code

Show

**App.svelte**: ```svelte

{#if !enabled} Select some icons to continue {:else} Copy URL for {#key enabled}{enabled}{/key} icons {/if} Light mode

{#each ic as icon (icon.id)}

(selected[icon.id] = !selected[icon.id])} class:active={selected[icon.id]} animate:flip={{duration: 500}} transition:blur>

{/each}

``` **Icons.js**: ```js export const icons = [ { "id": "ableton", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Ableton-Dark.svg" }, { "id": "activitypub", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/ActivityPub-Dark.svg" }, { "id": "actix", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Actix-Dark.svg" }, { "id": "ae", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/AfterEffects.svg" }, { "id": "aiscript", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/AiScript-Dark.svg" }, { "id": "alpinejs", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/AlpineJS-Dark.svg" }, { "id": "androidstudio", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/AndroidStudio-Dark.svg" }, { "id": "angular", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Angular-Dark.svg" }, { "id": "ansible", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Ansible.svg" }, { "id": "apollo", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Apollo.svg" }, { "id": "appwrite", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Appwrite.svg" }, { "id": "arduino", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Arduino.svg" }, { "id": "astro", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Astro.svg" }, { "id": "au", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Audition.svg" }, { "id": "autocad", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/AutoCAD-Dark.svg" }, { "id": "aws", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/AWS-Dark.svg" }, { "id": "azul", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Azul.svg" }, { "id": "azure", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Azure-Dark.svg" }, { "id": "bash", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Bash-Dark.svg" }, { "id": "bevy", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Bevy-Dark.svg" }, { "id": "blender", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Blender-Dark.svg" }, { "id": "bootstrap", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Bootstrap.svg" }, { "id": "bsd", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/BSD-Dark.svg" }, { "id": "c", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/C.svg" }, { "id": "cs", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/CS.svg" }, { "id": "cpp", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/CPP.svg" }, { "id": "cassandra", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Cassandra-Dark.svg" }, { "id": "clojure", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Clojure-Dark.svg" }, { "id": "cloudflare", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Cloudflare-Dark.svg" }, { "id": "codepen", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/CodePen-Dark.svg" }, { "id": "coffeescript", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/CoffeeScript-Dark.svg" }, { "id": "css", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/CSS.svg" }, { "id": "dart", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Dart-Dark.svg" }, { "id": "deno", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/DENO-Dark.svg" }, { "id": "discord", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Discord.svg" }, { "id": "bots", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/DiscordBots.svg" }, { "id": "django", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Django.svg" }, { "id": "docker", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Docker.svg" }, { "id": "dotnet", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/DotNet.svg" }, { "id": "dynamodb", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/DynamoDB-Dark.svg" }, { "id": "eclipse", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Eclipse-Dark.svg" }, { "id": "electron", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Electron.svg" }, { "id": "elixir", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Elixir-Dark.svg" }, { "id": "emacs", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Emacs.svg" }, { "id": "ember", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Ember.svg" }, { "id": "emotion", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Emotion-Dark.svg" }, { "id": "express", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/ExpressJS-Dark.svg" }, { "id": "fastapi", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/FastAPI.svg" }, { "id": "fediverse", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Fediverse-Dark.svg" }, { "id": "figma", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Figma-Dark.svg" }, { "id": "firebase", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Firebase-Dark.svg" }, { "id": "flask", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Flask-Dark.svg" }, { "id": "flutter", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Flutter-Dark.svg" }, { "id": "fortran", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Fortran.svg" }, { "id": "gamemakerstudio", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/GameMakerStudio.svg" }, { "id": "gatsby", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Gatsby.svg" }, { "id": "gcp", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/GCP-Dark.svg" }, { "id": "git", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Git.svg" }, { "id": "github", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Github-Dark.svg" }, { "id": "gitlab", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/GitLab-Dark.svg" }, { "id": "gherkin", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Gherkin-Dark.svg" }, { "id": "go", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/GoLang.svg" }, { "id": "godot", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Godot-Dark.svg" }, { "id": "grafana", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Grafana-Dark.svg" }, { "id": "graphql", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/GraphQL-Dark.svg" }, { "id": "gtk", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/GTK-Dark.svg" }, { "id": "haskell", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Haskell-Dark.svg" }, { "id": "haxe", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Haxe-Dark.svg" }, { "id": "haxeflixel", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/HaxeFlixel-Dark.svg" }, { "id": "heroku", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Heroku.svg" }, { "id": "html", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/HTML.svg" }, { "id": "idea", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Idea-Dark.svg" }, { "id": "ai", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Illustrator.svg" }, { "id": "instagram", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Instagram.svg" }, { "id": "java", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Java-Dark.svg" }, { "id": "js", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/JavaScript.svg" }, { "id": "jenkins", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Jenkins-Dark.svg" }, { "id": "jest", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Jest.svg" }, { "id": "jquery", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/JQuery.svg" }, { "id": "julia", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Julia-Dark.svg" }, { "id": "kotlin", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Kotlin-Dark.svg" }, { "id": "ktor", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Ktor-Dark.svg" }, { "id": "kubernetes", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Kubernetes.svg" }, { "id": "laravel", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Laravel-Dark.svg" }, { "id": "latex", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/LaTeX-Dark.svg" }, { "id": "linkedin", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/LinkedIn.svg" }, { "id": "linux", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Linux-Dark.svg" }, { "id": "lua", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Lua-Dark.svg" }, { "id": "md", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Markdown-Dark.svg" }, { "id": "mastodon", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Mastodon-Dark.svg" }, { "id": "materialui", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/MaterialUI-Dark.svg" }, { "id": "misskey", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Misskey-Dark.svg" }, { "id": "mongodb", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/MongoDB.svg" }, { "id": "mysql", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/MySQL-Dark.svg" }, { "id": "neovim", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/NeoVim-Dark.svg" }, { "id": "nestjs", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/NestJS-Dark.svg" }, { "id": "netlify", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Netlify-Dark.svg" }, { "id": "nextjs", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/NextJS-Dark.svg" }, { "id": "nginx", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Nginx.svg" }, { "id": "nim", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Nim-Dark.svg" }, { "id": "nodejs", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/NodeJS-Dark.svg" }, { "id": "nuxtjs", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/NuxtJS-Dark.svg" }, { "id": "ocaml", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/OCaml.svg" }, { "id": "octave", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Octave-Dark.svg" }, { "id": "openshift", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/OpenShift.svg" }, { "id": "openstack", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/OpenStack-Dark.svg" }, { "id": "perl", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Perl.svg" }, { "id": "ps", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Photoshop.svg" }, { "id": "php", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/PHP-Dark.svg" }, { "id": "plan9", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Plan9-Dark.svg" }, { "id": "postgres", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/PostgreSQL-Dark.svg" }, { "id": "powershell", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Powershell-Dark.svg" }, { "id": "pr", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Premiere.svg" }, { "id": "prisma", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Prisma.svg" }, { "id": "prometheus", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Prometheus.svg" }, { "id": "pug", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Pug-Dark.svg" }, { "id": "py", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Python-Dark.svg" }, { "id": "pytorch", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/PyTorch-Dark.svg" }, { "id": "qt", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/QT-Dark.svg" }, { "id": "r", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/R-Dark.svg" }, { "id": "rails", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Rails.svg" }, { "id": "raspberrypi", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/RaspberryPi-Dark.svg" }, { "id": "react", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/React-Dark.svg" }, { "id": "redis", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Redis-Dark.svg" }, { "id": "redux", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Redux.svg" }, { "id": "regex", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Regex-Dark.svg" }, { "id": "remix", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Remix-Dark.svg" }, { "id": "rocket", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Rocket.svg" }, { "id": "rollupjs", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/RollupJS-Dark.svg" }, { "id": "ruby", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Ruby.svg" }, { "id": "rust", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Rust.svg" }, { "id": "sass", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Sass.svg" }, { "id": "solidity", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Solidity.svg" }, { "id": "spring", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Spring-Dark.svg" }, { "id": "sqlite", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/SQLite.svg" }, { "id": "stackoverflow", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/StackOverflow-Dark.svg" }, { "id": "styledcomponents", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/StyledComponents.svg" }, { "id": "supabase", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Supabase-Dark.svg" }, { "id": "scala", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Scala-Dark.svg" }, { "id": "svelte", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Svelte.svg" }, { "id": "svg", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/SVG-Dark.svg" }, { "id": "swift", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Swift.svg" }, { "id": "symfony", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Symfony-Dark.svg" }, { "id": "tailwind", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/TailwindCSS-Dark.svg" }, { "id": "tauri", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Tauri-Dark.svg" }, { "id": "tensorflow", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/TensorFlow-Dark.svg" }, { "id": "twitter", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Twitter.svg" }, { "id": "ts", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/TypeScript.svg" }, { "id": "unity", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Unity-Dark.svg" }, { "id": "unreal", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/UnrealEngine.svg" }, { "id": "v", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/V-Dark.svg" }, { "id": "vala", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Vala.svg" }, { "id": "vim", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/VIM-Dark.svg" }, { "id": "visualstudio", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/VisualStudio-Dark.svg" }, { "id": "vite", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Vite-Dark.svg" }, { "id": "vscode", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/VSCode-Dark.svg" }, { "id": "vue", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/VueJS-Dark.svg" }, { "id": "wasm", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/WebAssembly.svg" }, { "id": "webpack", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Webpack-Dark.svg" }, { "id": "windicss", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/WindiCSS-Dark.svg" }, { "id": "wordpress", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Wordpress.svg" }, { "id": "workers", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Workers-Dark.svg" }, { "id": "zig", "url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Zig-Dark.svg" } ] ```

[Explosion-Scratch]

Not sure what's wrong with the video, keeps glitching

[tandpfun]

I love it! I don't know svelte right now but it would be cool to add this to the site as the icon builder.

[Explosion-Scratch]

I love it! I don't know svelte right now but it would be cool to add this to the site as the icon builder. Svelte is famous for being a disappearing framework, meaning that instead of shipping a bundle + virtual DOM it compiles directly to HTML + JS + CSS, so this should be fairly simple to add.

[Explosion-Scratch]

I'll work on a PR

[Explosion-Scratch]

Wait, is the site open source

[tandpfun]

The site isn't open source rn and it's in vue, so that wouldn't really work.

[Explosion-Scratch]

Could you compile it to HTML and CSS then just copy paste?

[Explosion-Scratch]

Didn't know that the site was in Vue or I would've coded it in vue

[bruce3x]

I recently discovered a website that can conveniently generate skill icons and copy links. :) https://www.skilliconsgenerator.com/