├── app ├── favicon.ico ├── robots.ts ├── sitemap.ts └── about │ └── page.tsx ├── .github └── FUNDING.yml ├── postcss.config.js ├── public ├── robots.txt ├── icons │ ├── icon-192.png │ ├── icon-512.png │ └── apple-touch-icon.png ├── logos │ ├── technology │ │ ├── sass │ │ │ └── sass.png │ │ ├── shadcn │ │ │ ├── shadcn.png │ │ │ └── shadcn-light.png │ │ ├── docker │ │ │ ├── docker.webp │ │ │ └── docker-vertical.webp │ │ ├── leetcode │ │ │ ├── leetcode.png │ │ │ └── leetcode-light.png │ │ ├── ringcentral │ │ │ └── ringcentral.png │ │ ├── github │ │ │ ├── github-wordmark-light.png │ │ │ ├── github-light.svg │ │ │ └── github.svg │ │ ├── microsoft │ │ │ ├── microsoft-horizontal-light.png │ │ │ └── microsoft.svg │ │ ├── bulma │ │ │ └── bulma.svg │ │ ├── vite │ │ │ ├── vite.svg │ │ │ └── vite-horizontal.svg │ │ ├── vercel │ │ │ ├── vercel.svg │ │ │ └── vercel-light.svg │ │ ├── liveblocks │ │ │ └── liveblocks.svg │ │ ├── npm │ │ │ ├── npm.svg │ │ │ └── npm-wordmark.svg │ │ ├── visualstudio │ │ │ └── visualstudio.svg │ │ ├── alpinejs │ │ │ └── alpinejs.svg │ │ ├── hyper │ │ │ └── hyper.svg │ │ ├── nomad │ │ │ └── nomad.svg │ │ ├── vuejs │ │ │ └── vuejs.svg │ │ ├── cmake │ │ │ └── cmake.svg │ │ ├── logstash │ │ │ └── logstash.svg │ │ ├── ifttt │ │ │ └── ifttt.svg │ │ ├── pnpm │ │ │ └── pnpm.svg │ │ ├── lokalise │ │ │ └── lokalise.svg │ │ ├── magento │ │ │ └── magento.svg │ │ ├── radixui │ │ │ └── radixui.svg │ │ ├── anthropic │ │ │ ├── anthropic.svg │ │ │ └── anthropic-light.svg │ │ ├── dovetail │ │ │ └── dovetail.svg │ │ ├── framer │ │ │ └── framer.svg │ │ ├── packer │ │ │ └── packer.svg │ │ ├── lit │ │ │ └── lit.svg │ │ ├── serverless │ │ │ └── serverless.svg │ │ ├── elementui │ │ │ └── elementui.svg │ │ ├── haskell │ │ │ └── haskell.svg │ │ ├── fsharp │ │ │ └── fsharp.svg │ │ ├── hibernate │ │ │ └── hibernate.svg │ │ ├── vault │ │ │ └── vault.svg │ │ ├── ansible │ │ │ └── ansible.svg │ │ ├── axios │ │ │ └── axios.svg │ │ ├── pytorch │ │ │ └── pytorch.svg │ │ ├── terraform │ │ │ └── terraform.svg │ │ ├── framework7 │ │ │ └── framework7.svg │ │ ├── jamstack │ │ │ └── jamstack.svg │ │ ├── oracle │ │ │ └── oracle.svg │ │ ├── erlang │ │ │ ├── erlang.svg │ │ │ └── erlang-vertical2.svg │ │ ├── cakephp │ │ │ └── cakephp.svg │ │ ├── render │ │ │ └── render.svg │ │ ├── auth0 │ │ │ └── auth0.svg │ │ ├── hhvm │ │ │ └── hhvm.svg │ │ ├── karma │ │ │ └── karma.svg │ │ ├── hotjar │ │ │ └── hotjar.svg │ │ ├── ballerina │ │ │ └── ballerina.svg │ │ ├── premierepro │ │ │ └── premierepro.svg │ │ ├── sonarqube │ │ │ └── sonarqube.svg │ │ ├── materialui │ │ │ └── materialui.svg │ │ ├── kotlin │ │ │ └── kotlin.svg │ │ ├── markdown │ │ │ └── markdown.svg │ │ ├── modx │ │ │ └── modx.svg │ │ ├── pandas │ │ │ └── pandas.svg │ │ ├── backbonejs │ │ │ └── backbonejs.svg │ │ ├── crystal │ │ │ └── crystal.svg │ │ ├── akka │ │ │ └── akka.svg │ │ ├── html │ │ │ └── html.svg │ │ ├── kibana │ │ │ └── kibana.svg │ │ ├── vuetify │ │ │ └── vuetify.svg │ │ ├── beats │ │ │ └── beats.svg │ │ ├── miro │ │ │ └── miro.svg │ │ ├── esbuild │ │ │ └── esbuild.svg │ │ ├── typo3 │ │ │ └── typo3.svg │ │ ├── webassembly │ │ │ └── webassembly.svg │ │ ├── biome │ │ │ └── biome.svg │ │ ├── ec2 │ │ │ └── ec2.svg │ │ ├── scalingo │ │ │ └── scalingo.svg │ │ ├── sema │ │ │ └── sema.svg │ │ ├── solidity │ │ │ └── solidity.svg │ │ ├── webpack │ │ │ └── webpack.svg │ │ ├── rockylinux │ │ │ └── rockylinux.svg │ │ ├── upwork │ │ │ ├── upwork2.svg │ │ │ └── upwork.svg │ │ ├── vagrant │ │ │ └── vagrant.svg │ │ ├── elm │ │ │ ├── elm.svg │ │ │ └── elm-horizontal.svg │ │ ├── angularmaterial │ │ │ └── angularmaterial.svg │ │ ├── hashnode │ │ │ └── hashnode.svg │ │ ├── heroku │ │ │ └── heroku.svg │ │ ├── kaggle │ │ │ └── kaggle.svg │ │ ├── gitter │ │ │ └── gitter.svg │ │ ├── gatsbyjs │ │ │ └── gatsbyjs.svg │ │ ├── pytorch3d │ │ │ └── pytorch3d.svg │ │ ├── elasticsearch │ │ │ └── elasticsearch.svg │ │ ├── julia │ │ │ └── julia.svg │ │ ├── rect │ │ │ └── rect.svg │ │ ├── sketch │ │ │ └── sketch.svg │ │ ├── shopware │ │ │ └── shopware.svg │ │ ├── pwa │ │ │ └── pwa.svg │ │ ├── faunadb │ │ │ └── faunadb.svg │ │ ├── haxe │ │ │ └── haxe.svg │ │ ├── purescript │ │ │ └── purescript.svg │ │ ├── lunacy │ │ │ └── lunacy.svg │ │ ├── mozilla │ │ │ ├── mozilla-light.svg │ │ │ └── mozilla.svg │ │ ├── lodash │ │ │ └── lodash.svg │ │ ├── unix │ │ │ └── unix.svg │ │ ├── keras │ │ │ └── keras.svg │ │ ├── apple │ │ │ └── apple.svg │ │ ├── replit │ │ │ └── replit.svg │ │ ├── onedrive │ │ │ └── onedrive.svg │ │ ├── prisma │ │ │ └── prisma.svg │ │ ├── bitbucket │ │ │ └── bitbucket.svg │ │ ├── pytest │ │ │ └── pytest.svg │ │ ├── atlassian │ │ │ └── atlassian.svg │ │ ├── couchdb │ │ │ └── couchdb.svg │ │ ├── thealgorithms │ │ │ └── thealgorithms.svg │ │ ├── codepen │ │ │ └── codepen.svg │ │ ├── capacitor │ │ │ └── capacitor.svg │ │ ├── trello │ │ │ └── trello.svg │ │ ├── k3s │ │ │ └── k3s.svg │ │ ├── stream │ │ │ └── stream.svg │ │ ├── preact │ │ │ └── preact.svg │ │ ├── semanticui │ │ │ └── semanticui.svg │ │ ├── chakraui │ │ │ └── chakraui.svg │ │ ├── codeforces │ │ │ └── codeforces.svg │ │ ├── devicon │ │ │ └── devicon.svg │ │ ├── hexo │ │ │ └── hexo.svg │ │ ├── circleci │ │ │ └── circleci.svg │ │ ├── graphql │ │ │ └── graphql.svg │ │ ├── mongodb │ │ │ ├── mongodb2.svg │ │ │ └── mongodb.svg │ │ ├── django │ │ │ └── django.svg │ │ ├── numpy │ │ │ └── numpy.svg │ │ ├── css │ │ │ ├── css.svg │ │ │ └── css-vertical.svg │ │ ├── meteorjs │ │ │ └── meteorjs.svg │ │ ├── minitab │ │ │ └── minitab.svg │ │ ├── tailwindcss │ │ │ └── tailwindcss.svg │ │ ├── adonisjs │ │ │ └── adonisjs.svg │ │ ├── expressjs │ │ │ └── expressjs.svg │ │ ├── stackoverflow │ │ │ └── stackoverflow.svg │ │ ├── appcelerator │ │ │ └── appcelerator.svg │ │ ├── jule │ │ │ └── jule.svg │ │ ├── tensorflow │ │ │ └── tensorflow.svg │ │ ├── vertx │ │ │ └── vertx.svg │ │ ├── azuredevops │ │ │ └── azuredevops.svg │ │ ├── ionic │ │ │ └── ionic.svg │ │ ├── qwik │ │ │ └── qwik.svg │ │ ├── git │ │ │ └── git.svg │ │ ├── dropbox │ │ │ └── dropbox.svg │ │ ├── protractor │ │ │ └── protractor.svg │ │ ├── vk │ │ │ └── vk.svg │ │ ├── clickhouse │ │ │ └── clickhouse.svg │ │ ├── contao │ │ │ └── contao.svg │ │ ├── jasmine │ │ │ └── jasmine.svg │ │ ├── ory │ │ │ └── ory.svg │ │ ├── hugo │ │ │ └── hugo.svg │ │ ├── zod │ │ │ └── zod.svg │ │ ├── eslint │ │ │ └── eslint.svg │ │ ├── spring │ │ │ └── spring.svg │ │ ├── storybook │ │ │ └── storybook.svg │ │ ├── webflow │ │ │ └── webflow.svg │ │ ├── resend │ │ │ ├── resend.svg │ │ │ └── resend-light.svg │ │ ├── xamarin │ │ │ └── xamarin.svg │ │ ├── emberjs │ │ │ └── emberjs.svg │ │ ├── ngrx │ │ │ └── ngrx.svg │ │ ├── sentry │ │ │ └── sentry.svg │ │ ├── visualbasic │ │ │ └── visualbasic.svg │ │ ├── unity │ │ │ └── unity.svg │ │ ├── vitest │ │ │ └── vitest.svg │ │ ├── nim │ │ │ └── nim.svg │ │ ├── zig │ │ │ └── zig.svg │ │ ├── google │ │ │ └── google.svg │ │ ├── pyscript │ │ │ └── pyscript.svg │ │ ├── php │ │ │ └── php.svg │ │ ├── yaml │ │ │ └── yaml.svg │ │ ├── nixos │ │ │ └── nixos.svg │ │ ├── openstack │ │ │ └── openstack.svg │ │ ├── moleculer │ │ │ └── moleculer.svg │ │ ├── jiraalign │ │ │ └── jiraalign.svg │ │ ├── grafbase │ │ │ └── grafbase.svg │ │ ├── netflix │ │ │ └── netflix.svg │ │ ├── jira │ │ │ └── jira.svg │ │ ├── codeigniter │ │ │ └── codeigniter.svg │ │ ├── sublime │ │ │ └── sublime.svg │ │ ├── fortran │ │ │ └── fortran.svg │ │ ├── firebase │ │ │ └── firebase.svg │ │ ├── lightroom │ │ │ └── lightroom.svg │ │ ├── messenger │ │ │ └── messenger.svg │ │ ├── redhat │ │ │ └── redhat.svg │ │ ├── codefresh │ │ │ └── codefresh.svg │ │ ├── appwrite │ │ │ └── appwrite.svg │ │ ├── gatling │ │ │ └── gatling.svg │ │ ├── shotgrid │ │ │ └── shotgrid.svg │ │ ├── vimeo │ │ │ └── vimeo2.svg │ │ ├── qt │ │ │ └── qt.svg │ │ ├── json │ │ │ └── json.svg │ │ ├── r │ │ │ └── r.svg │ │ ├── gitpod │ │ │ └── gitpod.svg │ │ ├── railway │ │ │ ├── railway-light.svg │ │ │ └── railway.svg │ │ ├── gitlab │ │ │ └── gitlab.svg │ │ ├── infura │ │ │ └── infura.svg │ │ ├── insomnia │ │ │ └── insomnia.svg │ │ └── junit │ │ │ └── junit.svg │ ├── pharmaceuticals │ │ ├── jnj │ │ │ └── jnj.png │ │ ├── merck │ │ │ └── merck.svg │ │ └── sanofi │ │ │ └── sanofi.svg │ ├── automobile │ │ ├── tesla │ │ │ ├── tesla-square.png │ │ │ └── tesla-wordmark.svg │ │ └── landrover │ │ │ └── landrover.png │ ├── art and music │ │ ├── mixcloud │ │ │ ├── mixcloud.png │ │ │ ├── mixcloud2.png │ │ │ ├── mixcloud3.png │ │ │ ├── mixcloud-light.png │ │ │ ├── mixcloud-wordmark.png │ │ │ ├── mixcloud2-wordmark.png │ │ │ ├── mixcloud3-wordmark.png │ │ │ └── mixcloud-wordmark-light.png │ │ ├── spotify │ │ │ ├── spotify2-horizontal.png │ │ │ └── spotify.svg │ │ ├── bandcamp │ │ │ ├── bandcamp-horizontal.png │ │ │ ├── bandcamp2-horizontal.png │ │ │ ├── bandcamp-horizontal-light.png │ │ │ ├── bandcamp2-horizontal-light.png │ │ │ └── bandcamp.svg │ │ ├── deviantart │ │ │ ├── deviantart.svg │ │ │ └── deviantart2.svg │ │ ├── artstation │ │ │ └── artstation.svg │ │ ├── dribbble │ │ │ └── dribbble.svg │ │ ├── behance │ │ │ └── behance3.svg │ │ └── pinterest │ │ │ └── pinterest.svg │ ├── financial services │ │ ├── paytm │ │ │ └── paytm.jpeg │ │ ├── stripe │ │ │ └── stripe.jpeg │ │ ├── payoneer │ │ │ └── payoneer.png │ │ ├── razorpay │ │ │ └── razorpay.png │ │ ├── buymeacoffee │ │ │ └── buymeacoffee.png │ │ ├── phonepe │ │ │ └── phonepe.svg │ │ └── cashfree │ │ │ └── cashfree.svg │ ├── travel and tourism │ │ ├── booking │ │ │ └── booking.jpeg │ │ └── airbnb │ │ │ └── airbnb-circle.png │ ├── clothing and apparel │ │ ├── adidas │ │ │ ├── adidas.svg │ │ │ └── adidas-light.svg │ │ └── nike │ │ │ ├── nike.svg │ │ │ └── nike-light.svg │ ├── education │ │ └── scholar │ │ │ └── scholar.svg │ ├── social media │ │ ├── bluesky │ │ │ └── bluesky.svg │ │ ├── x │ │ │ ├── x.svg │ │ │ └── x-light.svg │ │ ├── twitch │ │ │ └── twitch.svg │ │ └── discord │ │ │ └── discord.svg │ └── instruments │ │ ├── cymbals │ │ └── cymbals.svg │ │ └── flute │ │ └── flute.svg └── site.webmanifest ├── components ├── search │ ├── index.ts │ └── ClearButton.tsx ├── home │ ├── index.ts │ ├── Hero.tsx │ └── StarUsOnGithubButton.tsx ├── modal │ ├── index.ts │ ├── ZoomOverlay.tsx │ └── ModalTopBar.tsx ├── navbar │ ├── Logo.tsx │ ├── index.ts │ └── SearchButton.tsx ├── filter │ ├── index.ts │ ├── DevModeBanner.tsx │ ├── CategoryList.tsx │ ├── IconList.tsx │ ├── Selected.tsx │ ├── CategoryButton.tsx │ └── CategoryIcon.tsx ├── about │ ├── Hero.tsx │ ├── index.ts │ ├── Project.tsx │ ├── QuickStart.tsx │ ├── IconShowcase.tsx │ ├── Community.tsx │ ├── Features.tsx │ ├── ViewOnGithubButton.tsx │ ├── IconCard.tsx │ └── IconSection.tsx └── ui │ └── input.tsx ├── interfaces └── index.ts ├── constants ├── home.ts ├── index.ts ├── nav.ts ├── categories.ts └── site.ts ├── lib └── fonts.ts ├── next.config.js ├── eslint.config.mjs ├── hooks ├── useDebounce.ts └── useSearchShortcuts.ts ├── components.json ├── .gitignore └── tsconfig.json /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/app/favicon.ico -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | buy_me_a_coffee: dheereshag 4 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | '@tailwindcss/postcss': {}, 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Allow: / 3 | Sitemap: https://coloured-icons.vercel.app/sitemap.xml 4 | -------------------------------------------------------------------------------- /public/icons/icon-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/icons/icon-192.png -------------------------------------------------------------------------------- /public/icons/icon-512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/icons/icon-512.png -------------------------------------------------------------------------------- /components/search/index.ts: -------------------------------------------------------------------------------- 1 | export { SearchBox } from "./SearchBox"; 2 | export { ClearButton } from "./ClearButton"; 3 | -------------------------------------------------------------------------------- /components/home/index.ts: -------------------------------------------------------------------------------- 1 | export { Hero } from "./Hero"; 2 | export { StarUsOnGithubButton } from "./StarUsOnGithubButton"; 3 | -------------------------------------------------------------------------------- /public/icons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/icons/apple-touch-icon.png -------------------------------------------------------------------------------- /public/logos/technology/sass/sass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/logos/technology/sass/sass.png -------------------------------------------------------------------------------- /public/logos/pharmaceuticals/jnj/jnj.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/logos/pharmaceuticals/jnj/jnj.png -------------------------------------------------------------------------------- /public/logos/technology/shadcn/shadcn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/logos/technology/shadcn/shadcn.png -------------------------------------------------------------------------------- /public/logos/technology/docker/docker.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/logos/technology/docker/docker.webp -------------------------------------------------------------------------------- /public/logos/automobile/tesla/tesla-square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/logos/automobile/tesla/tesla-square.png -------------------------------------------------------------------------------- /public/logos/technology/leetcode/leetcode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/logos/technology/leetcode/leetcode.png -------------------------------------------------------------------------------- /public/logos/art and music/mixcloud/mixcloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/logos/art and music/mixcloud/mixcloud.png -------------------------------------------------------------------------------- /public/logos/automobile/landrover/landrover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/logos/automobile/landrover/landrover.png -------------------------------------------------------------------------------- /public/logos/financial services/paytm/paytm.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/logos/financial services/paytm/paytm.jpeg -------------------------------------------------------------------------------- /public/logos/technology/shadcn/shadcn-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/logos/technology/shadcn/shadcn-light.png -------------------------------------------------------------------------------- /public/logos/art and music/mixcloud/mixcloud2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/logos/art and music/mixcloud/mixcloud2.png -------------------------------------------------------------------------------- /public/logos/art and music/mixcloud/mixcloud3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/logos/art and music/mixcloud/mixcloud3.png -------------------------------------------------------------------------------- /public/logos/financial services/stripe/stripe.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/logos/financial services/stripe/stripe.jpeg -------------------------------------------------------------------------------- /public/logos/technology/docker/docker-vertical.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/logos/technology/docker/docker-vertical.webp -------------------------------------------------------------------------------- /public/logos/technology/leetcode/leetcode-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/logos/technology/leetcode/leetcode-light.png -------------------------------------------------------------------------------- /public/logos/technology/ringcentral/ringcentral.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/logos/technology/ringcentral/ringcentral.png -------------------------------------------------------------------------------- /public/logos/financial services/payoneer/payoneer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/logos/financial services/payoneer/payoneer.png -------------------------------------------------------------------------------- /public/logos/financial services/razorpay/razorpay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/logos/financial services/razorpay/razorpay.png -------------------------------------------------------------------------------- /public/logos/travel and tourism/booking/booking.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/logos/travel and tourism/booking/booking.jpeg -------------------------------------------------------------------------------- /public/logos/art and music/mixcloud/mixcloud-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/logos/art and music/mixcloud/mixcloud-light.png -------------------------------------------------------------------------------- /public/logos/technology/github/github-wordmark-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/logos/technology/github/github-wordmark-light.png -------------------------------------------------------------------------------- /public/logos/travel and tourism/airbnb/airbnb-circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/logos/travel and tourism/airbnb/airbnb-circle.png -------------------------------------------------------------------------------- /public/logos/art and music/mixcloud/mixcloud-wordmark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/logos/art and music/mixcloud/mixcloud-wordmark.png -------------------------------------------------------------------------------- /public/logos/art and music/mixcloud/mixcloud2-wordmark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/logos/art and music/mixcloud/mixcloud2-wordmark.png -------------------------------------------------------------------------------- /public/logos/art and music/mixcloud/mixcloud3-wordmark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/logos/art and music/mixcloud/mixcloud3-wordmark.png -------------------------------------------------------------------------------- /public/logos/art and music/spotify/spotify2-horizontal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/logos/art and music/spotify/spotify2-horizontal.png -------------------------------------------------------------------------------- /public/logos/art and music/bandcamp/bandcamp-horizontal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/logos/art and music/bandcamp/bandcamp-horizontal.png -------------------------------------------------------------------------------- /public/logos/art and music/bandcamp/bandcamp2-horizontal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/logos/art and music/bandcamp/bandcamp2-horizontal.png -------------------------------------------------------------------------------- /public/logos/financial services/buymeacoffee/buymeacoffee.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/logos/financial services/buymeacoffee/buymeacoffee.png -------------------------------------------------------------------------------- /public/logos/art and music/mixcloud/mixcloud-wordmark-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/logos/art and music/mixcloud/mixcloud-wordmark-light.png -------------------------------------------------------------------------------- /public/logos/art and music/bandcamp/bandcamp-horizontal-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/logos/art and music/bandcamp/bandcamp-horizontal-light.png -------------------------------------------------------------------------------- /public/logos/art and music/bandcamp/bandcamp2-horizontal-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/logos/art and music/bandcamp/bandcamp2-horizontal-light.png -------------------------------------------------------------------------------- /public/logos/technology/microsoft/microsoft-horizontal-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dheereshag/coloured-icons/HEAD/public/logos/technology/microsoft/microsoft-horizontal-light.png -------------------------------------------------------------------------------- /public/logos/technology/bulma/bulma.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/vite/vite.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /interfaces/index.ts: -------------------------------------------------------------------------------- 1 | export interface Icon { 2 | name: string; 3 | category: string; 4 | classes: string[]; 5 | url: string; 6 | } 7 | 8 | export interface Category { 9 | name: string; 10 | } 11 | -------------------------------------------------------------------------------- /public/logos/technology/vercel/vercel.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/logos/technology/vercel/vercel-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/logos/technology/liveblocks/liveblocks.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/npm/npm.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/art and music/bandcamp/bandcamp.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /constants/home.ts: -------------------------------------------------------------------------------- 1 | export const heroHeadingClass = 2 | "mt-4 text-4xl sm:text-6xl text-gray-900 font-semibold"; 3 | 4 | export const heroSubheading = 5 | "From React to MongoDB, Tesla to Spotify-every icon your project needs, instantly accessible via CDN."; 6 | -------------------------------------------------------------------------------- /public/logos/art and music/deviantart/deviantart.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/visualstudio/visualstudio.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/alpinejs/alpinejs.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/hyper/hyper.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/modal/index.ts: -------------------------------------------------------------------------------- 1 | export { Modal } from "./Modal"; 2 | export { ModalTopBar } from "./ModalTopBar"; 3 | export { IconHeader } from "./IconHeader"; 4 | export { UsageList } from "./UsageList"; 5 | export { ZoomOverlay } from "./ZoomOverlay"; 6 | export { IconCode } from "./IconCode"; 7 | -------------------------------------------------------------------------------- /public/logos/technology/nomad/nomad.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /constants/index.ts: -------------------------------------------------------------------------------- 1 | export { default as categories } from "./categories"; 2 | export { default as icons } from "./icons"; 3 | export { default as logoAliases } from "./logoAliases"; 4 | export { default as logoMeta } from "./logoMeta"; 5 | export { default as menuItems } from "./nav"; 6 | export * from "./home"; 7 | -------------------------------------------------------------------------------- /public/logos/technology/vuejs/vuejs.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/cmake/cmake.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/technology/logstash/logstash.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /public/logos/art and music/deviantart/deviantart2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/ifttt/ifttt.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/technology/pnpm/pnpm.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /components/navbar/Logo.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | import { pacifico } from "@/lib/fonts"; 3 | export const Logo: React.FC = () => ( 4 | 8 | Coloured Icons 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /public/logos/technology/lokalise/lokalise.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/magento/magento.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/technology/radixui/radixui.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/anthropic/anthropic.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/dovetail/dovetail.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/navbar/index.ts: -------------------------------------------------------------------------------- 1 | export { Navbar } from "./Navbar"; 2 | export { MobileMenu } from "./MobileMenu"; 3 | export { DesktopMenu } from "./DesktopMenu"; 4 | export { SearchButton } from "./SearchButton"; 5 | export { Logo } from "./Logo"; 6 | export { MobileHamburger } from "./MobileHamburger"; 7 | export { MobileMenuItem } from "./MobileMenuItem"; 8 | -------------------------------------------------------------------------------- /public/logos/technology/anthropic/anthropic-light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/framer/framer.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/packer/packer.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/technology/lit/lit.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/serverless/serverless.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/elementui/elementui.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/haskell/haskell.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/fsharp/fsharp.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/hibernate/hibernate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/logos/technology/vault/vault.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lib/fonts.ts: -------------------------------------------------------------------------------- 1 | import { Outfit, Rubik, Pacifico } from "next/font/google"; 2 | 3 | export const outfit = Outfit({ subsets: ["latin"], display: "fallback" }); 4 | 5 | export const rubik = Rubik({ 6 | subsets: ["latin"], 7 | display: "fallback", 8 | }); 9 | 10 | export const pacifico = Pacifico({ 11 | subsets: ["latin"], 12 | weight: "400", 13 | display: "fallback", 14 | }); 15 | -------------------------------------------------------------------------------- /app/robots.ts: -------------------------------------------------------------------------------- 1 | import type { MetadataRoute } from "next"; 2 | import { SITE } from "@/constants/site"; 3 | 4 | export default function robots(): MetadataRoute.Robots { 5 | const base = new URL(SITE.url).origin; 6 | return { 7 | rules: { 8 | userAgent: "*", 9 | allow: "/", 10 | disallow: ["/api/"], 11 | }, 12 | sitemap: `${base}/sitemap.xml`, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /public/logos/clothing and apparel/adidas/adidas.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/logos/technology/ansible/ansible.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/technology/axios/axios.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | -------------------------------------------------------------------------------- /public/logos/technology/pytorch/pytorch.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/microsoft/microsoft.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/terraform/terraform.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/technology/framework7/framework7.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/technology/jamstack/jamstack.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/technology/oracle/oracle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/erlang/erlang.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/cakephp/cakephp.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/render/render.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/auth0/auth0.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/hhvm/hhvm.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/filter/index.ts: -------------------------------------------------------------------------------- 1 | export { Filter } from "./Filter"; 2 | export { Dropdown } from "./Dropdown"; 3 | export { Selected } from "./Selected"; 4 | export { DevModeBanner } from "./DevModeBanner"; 5 | export { CategoryButton } from "./CategoryButton"; 6 | export { CategoryList } from "./CategoryList"; 7 | export { CategoryIcon } from "./CategoryIcon"; 8 | export { IconList } from "./IconList"; 9 | export { IconCard } from "./IconCard"; 10 | -------------------------------------------------------------------------------- /constants/nav.ts: -------------------------------------------------------------------------------- 1 | export interface MenuItem { 2 | href: string; 3 | label: string; 4 | external?: boolean; 5 | } 6 | 7 | export const menuItems: MenuItem[] = [ 8 | { href: "/", label: "Home" }, 9 | { href: "/about", label: "About" }, 10 | { 11 | href: "https://github.com/dheereshag/coloured-icons/blob/master/README.md", 12 | label: "Docs", 13 | external: true, 14 | }, 15 | ]; 16 | 17 | export default menuItems; 18 | -------------------------------------------------------------------------------- /public/logos/technology/karma/karma.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/art and music/artstation/artstation.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/hotjar/hotjar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/education/scholar/scholar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/ballerina/ballerina.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/technology/premierepro/premierepro.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/sonarqube/sonarqube.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | import path from "path"; 2 | import { fileURLToPath } from "url"; 3 | 4 | const __filename = fileURLToPath(import.meta.url); 5 | const __dirname = path.dirname(__filename); 6 | 7 | /** @type {import('next').NextConfig} */ 8 | const nextConfig = { 9 | experimental: { 10 | // Enable the React Compiler for automatic memoization and performance optimizations 11 | reactCompiler: true, 12 | }, 13 | }; 14 | 15 | export default nextConfig; 16 | -------------------------------------------------------------------------------- /public/logos/technology/materialui/materialui.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /eslint.config.mjs: -------------------------------------------------------------------------------- 1 | import { dirname } from "path"; 2 | import { fileURLToPath } from "url"; 3 | import { FlatCompat } from "@eslint/eslintrc"; 4 | 5 | const __filename = fileURLToPath(import.meta.url); 6 | const __dirname = dirname(__filename); 7 | 8 | const compat = new FlatCompat({ 9 | baseDirectory: __dirname, 10 | }); 11 | 12 | const eslintConfig = [ 13 | ...compat.extends("next/core-web-vitals", "next/typescript"), 14 | ]; 15 | 16 | export default eslintConfig; 17 | -------------------------------------------------------------------------------- /components/about/Hero.tsx: -------------------------------------------------------------------------------- 1 | export function Hero() { 2 | return ( 3 |
4 |

5 | About Coloured Icons 6 |

7 |

8 | A carefully curated collection of beautiful, customizable icons for your 9 | next project 10 |

11 |
12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /public/logos/technology/kotlin/kotlin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/markdown/markdown.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/modx/modx.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/sitemap.ts: -------------------------------------------------------------------------------- 1 | import type { MetadataRoute } from "next"; 2 | import { SITE } from "@/constants/site"; 3 | 4 | export default async function sitemap(): Promise { 5 | const base = new URL(SITE.url).origin; 6 | 7 | const routes = ["", "/about"].map((path) => ({ 8 | url: `${base}${path || "/"}`, 9 | lastModified: new Date(), 10 | changeFrequency: "weekly" as const, 11 | priority: path === "" ? 1 : 0.7, 12 | })); 13 | 14 | return routes; 15 | } 16 | -------------------------------------------------------------------------------- /public/logos/technology/pandas/pandas.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/technology/backbonejs/backbonejs.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/crystal/crystal.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/technology/akka/akka.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/technology/html/html.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/kibana/kibana.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/vuetify/vuetify.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /public/logos/technology/beats/beats.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /public/logos/technology/miro/miro.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/esbuild/esbuild.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /hooks/useDebounce.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { useEffect, useState } from "react"; 3 | 4 | function useDebounce(value: T, delay = 0) { 5 | const [debouncedValue, setDebouncedValue] = useState(value); 6 | 7 | useEffect(() => { 8 | const handler = setTimeout(() => { 9 | setDebouncedValue(value); 10 | }, delay); 11 | 12 | return () => { 13 | clearTimeout(handler); 14 | }; 15 | }, [value, delay]); 16 | 17 | return debouncedValue; 18 | } 19 | 20 | export default useDebounce; 21 | -------------------------------------------------------------------------------- /public/logos/technology/typo3/typo3.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/technology/webassembly/webassembly.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/biome/biome.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/ec2/ec2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/scalingo/scalingo.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "new-york", 4 | "rsc": true, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "", 8 | "css": "app/globals.css", 9 | "baseColor": "neutral", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils", 16 | "ui": "@/components/ui", 17 | "lib": "@/lib", 18 | "hooks": "@/hooks" 19 | }, 20 | "iconLibrary": "lucide" 21 | } 22 | -------------------------------------------------------------------------------- /components/about/index.ts: -------------------------------------------------------------------------------- 1 | export { Hero } from "./Hero"; 2 | export { Project } from "./Project"; 3 | export { IconShowcase } from "./IconShowcase"; 4 | export { Features } from "./Features"; 5 | export { QuickStart } from "./QuickStart"; 6 | export { Community } from "./Community"; 7 | 8 | // Existing exports for convenience 9 | export { CdnInclude } from "./CdnInclude"; 10 | export { IconSection } from "./IconSection"; 11 | export { IconCard } from "./IconCard"; 12 | export { ViewOnGithubButton } from "./ViewOnGithubButton"; 13 | -------------------------------------------------------------------------------- /public/logos/technology/npm/npm-wordmark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/sema/sema.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/technology/solidity/solidity.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/webpack/webpack.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/rockylinux/rockylinux.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/technology/upwork/upwork2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/vagrant/vagrant.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/search/ClearButton.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from "@/components/ui/button"; 2 | import { X } from "lucide-react"; 3 | 4 | export const ClearButton: React.FC<{ onClick: () => void }> = ({ onClick }) => ( 5 | 14 | ); 15 | -------------------------------------------------------------------------------- /public/logos/technology/elm/elm.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/angularmaterial/angularmaterial.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/hashnode/hashnode.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/heroku/heroku.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/kaggle/kaggle.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /components/about/Project.tsx: -------------------------------------------------------------------------------- 1 | export function Project() { 2 | return ( 3 |
4 |

The Project

5 |

6 | Coloured Icons is an open-source project designed to provide developers 7 | and designers with high-quality, customizable icons. Each icon is 8 | carefully crafted to maintain consistency while offering flexibility in 9 | color and style. 10 |

11 |
12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /public/logos/technology/gitter/gitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/about/QuickStart.tsx: -------------------------------------------------------------------------------- 1 | import { CdnInclude } from "."; 2 | import { CI_CSS_URL_LATEST, CI_CSS_URL_VERSION } from "@/constants/about"; 3 | 4 | export function QuickStart() { 5 | return ( 6 |
7 |

Quick Start

8 | 9 | 13 | 14 |
15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /components/about/IconShowcase.tsx: -------------------------------------------------------------------------------- 1 | import { IconSection } from "."; 2 | import { socialIcons, techIcons } from "@/constants/about"; 3 | 4 | export function IconShowcase() { 5 | return ( 6 |
7 |

8 | Explore Our Icon Collection 9 |

10 |
11 | 12 | 13 |
14 |
15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /constants/categories.ts: -------------------------------------------------------------------------------- 1 | import { Category } from "@/interfaces"; 2 | 3 | const categories: Category[] = [ 4 | { name: "All" }, 5 | { name: "Art and Music" }, 6 | { name: "Automobile" }, 7 | { name: "Clothing and Apparel" }, 8 | { name: "Education" }, 9 | { name: "Financial Services" }, 10 | { name: "Food and Beverage" }, 11 | { name: "Pharmaceuticals" }, 12 | { name: "Social Media" }, 13 | { name: "Technology" }, 14 | { name: "Travel and Tourism" }, 15 | { name: "Instruments" }, 16 | { name: "Animals" }, 17 | ]; 18 | 19 | export default categories; 20 | -------------------------------------------------------------------------------- /components/about/Community.tsx: -------------------------------------------------------------------------------- 1 | import { ViewOnGithubButton } from "."; 2 | 3 | export function Community() { 4 | return ( 5 |
6 |

7 | Join the Community 8 |

9 |

10 | Coloured Icons is built with and for the developer community. We welcome 11 | contributions, suggestions, and feedback to make this project even 12 | better. 13 |

14 | 15 |
16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /public/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Coloured Icons", 3 | "short_name": "ColouredIcons", 4 | "description": "CDN-first coloured icons library for brands, tech, and more.", 5 | "start_url": "/", 6 | "display": "standalone", 7 | "background_color": "#ffffff", 8 | "theme_color": "#111827", 9 | "icons": [ 10 | { 11 | "src": "/icons/icon-192.png", 12 | "sizes": "192x192", 13 | "type": "image/png" 14 | }, 15 | { 16 | "src": "/icons/icon-512.png", 17 | "sizes": "512x512", 18 | "type": "image/png" 19 | } 20 | ] 21 | } 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | package-lock.json 38 | -------------------------------------------------------------------------------- /components/about/Features.tsx: -------------------------------------------------------------------------------- 1 | import { features } from "@/constants/about"; 2 | 3 | export function Features() { 4 | return ( 5 |
6 |

Features

7 |
    8 | {features.map((feature, index) => ( 9 |
  • 10 | • 11 | {feature} 12 |
    • 13 | ))} 14 |
15 |
16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /public/logos/technology/gatsbyjs/gatsbyjs.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/pytorch3d/pytorch3d.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/filter/DevModeBanner.tsx: -------------------------------------------------------------------------------- 1 | import { isDevelopmentMode } from "@/lib/dev-utils"; 2 | 3 | export const DevModeBanner = () => { 4 | if (!isDevelopmentMode()) return null; 5 | 6 | return ( 7 |
8 |
9 |
10 | 11 | Development Mode: Showing 5 icons per category 12 | 13 |
14 |
15 | ); 16 | }; 17 | -------------------------------------------------------------------------------- /components/home/Hero.tsx: -------------------------------------------------------------------------------- 1 | import { StarUsOnGithubButton } from "."; 2 | import { heroHeadingClass, heroSubheading } from "@/constants"; 3 | 4 | export const Hero = () => ( 5 |
6 |

7 | Zero downloads. Zero build steps. 8 |
9 | Just pure CDN magic. 10 |

11 |

12 | {heroSubheading} 13 |

14 | 15 |
16 | ); 17 | -------------------------------------------------------------------------------- /public/logos/technology/elasticsearch/elasticsearch.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /public/logos/technology/julia/julia.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/rect/rect.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /components/modal/ZoomOverlay.tsx: -------------------------------------------------------------------------------- 1 | interface ZoomOverlayProps { 2 | zoomedIcon: string | null; 3 | } 4 | 5 | export const ZoomOverlay: React.FC = ({ zoomedIcon }) => { 6 | if (!zoomedIcon) return null; 7 | return ( 8 |
9 |
10 | 11 |
12 |
13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /components/about/ViewOnGithubButton.tsx: -------------------------------------------------------------------------------- 1 | import { SiGithub } from "@icons-pack/react-simple-icons"; 2 | import { Button } from "@/components/ui/button"; 3 | import Link from "next/link"; 4 | 5 | export const ViewOnGithubButton = () => { 6 | return ( 7 | 18 | ); 19 | }; 20 | -------------------------------------------------------------------------------- /components/home/StarUsOnGithubButton.tsx: -------------------------------------------------------------------------------- 1 | import { Star } from "lucide-react"; 2 | import { Button } from "@/components/ui/button"; 3 | import Link from "next/link"; 4 | 5 | export const StarUsOnGithubButton = () => { 6 | return ( 7 | 17 | ); 18 | }; 19 | -------------------------------------------------------------------------------- /public/logos/art and music/dribbble/dribbble.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/sketch/sketch.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/technology/upwork/upwork.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/shopware/shopware.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/pwa/pwa.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/social media/bluesky/bluesky.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/about/IconCard.tsx: -------------------------------------------------------------------------------- 1 | import type { Icon as BaseIcon } from "@/interfaces"; 2 | interface IconCardProps { 3 | icon: Pick; 4 | } 5 | 6 | export const IconCard = ({ icon }: IconCardProps) => { 7 | return ( 8 |
12 | 13 | {icon.name} 14 |
15 | ); 16 | }; 17 | -------------------------------------------------------------------------------- /public/logos/technology/faunadb/faunadb.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/haxe/haxe.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/purescript/purescript.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /components/about/IconSection.tsx: -------------------------------------------------------------------------------- 1 | import { IconCard } from "."; 2 | import type { Icon as BaseIcon } from "@/interfaces"; 3 | 4 | interface IconSectionProps { 5 | title: string; 6 | icons: Array>; 7 | } 8 | 9 | export const IconSection: React.FC = ({ title, icons }) => { 10 | return ( 11 |
12 |

{title}

13 |
14 | {icons.map((icon) => ( 15 | 16 | ))} 17 |
18 |
19 | ); 20 | }; 21 | -------------------------------------------------------------------------------- /public/logos/technology/lunacy/lunacy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/mozilla/mozilla-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | -------------------------------------------------------------------------------- /public/logos/technology/lodash/lodash.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/technology/unix/unix.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/keras/keras.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/apple/apple.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/replit/replit.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/technology/onedrive/onedrive.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/prisma/prisma.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/logos/technology/bitbucket/bitbucket.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/instruments/cymbals/cymbals.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /public/logos/technology/pytest/pytest.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/technology/vite/vite-horizontal.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/technology/atlassian/atlassian.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/couchdb/couchdb.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/thealgorithms/thealgorithms.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/codepen/codepen.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/technology/mozilla/mozilla.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | 8 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2017", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./*"] 23 | } 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 26 | "exclude": ["node_modules"] 27 | } 28 | -------------------------------------------------------------------------------- /public/logos/social media/x/x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /public/logos/technology/capacitor/capacitor.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /public/logos/technology/trello/trello.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /components/modal/ModalTopBar.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from "@/components/ui/button"; 2 | import { X } from "lucide-react"; 3 | 4 | interface ModalTopBarProps { 5 | onClose: () => void; 6 | } 7 | 8 | export const ModalTopBar: React.FC = ({ onClose }) => { 9 | return ( 10 |
11 | 19 |
20 | ); 21 | }; 22 | -------------------------------------------------------------------------------- /public/logos/technology/k3s/k3s.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/technology/stream/stream.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/preact/preact.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/semanticui/semanticui.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/navbar/SearchButton.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { Button } from "@/components/ui/button"; 3 | import Link from "next/link"; 4 | import { Search } from "lucide-react"; 5 | 6 | interface SearchButtonProps { 7 | onClick: (e: React.MouseEvent) => void; 8 | } 9 | 10 | export const SearchButton: React.FC = ({ onClick }) => { 11 | return ( 12 | 23 | ); 24 | }; 25 | -------------------------------------------------------------------------------- /public/logos/technology/chakraui/chakraui.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/codeforces/codeforces.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /public/logos/technology/devicon/devicon.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/technology/hexo/hexo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 8 | 9 | -------------------------------------------------------------------------------- /public/logos/technology/circleci/circleci.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/graphql/graphql.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/mongodb/mongodb2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/logos/technology/django/django.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/numpy/numpy.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/technology/mongodb/mongodb.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/logos/clothing and apparel/adidas/adidas-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | -------------------------------------------------------------------------------- /public/logos/technology/css/css.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/meteorjs/meteorjs.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/minitab/minitab.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/tailwindcss/tailwindcss.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/adonisjs/adonisjs.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/expressjs/expressjs.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/stackoverflow/stackoverflow.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /public/logos/technology/appcelerator/appcelerator.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/jule/jule.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/logos/technology/tensorflow/tensorflow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/vertx/vertx.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/technology/azuredevops/azuredevops.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /public/logos/social media/x/x-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /public/logos/technology/ionic/ionic.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/qwik/qwik.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/git/git.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/dropbox/dropbox.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /public/logos/technology/protractor/protractor.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/technology/vk/vk.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/clickhouse/clickhouse.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/contao/contao.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/logos/technology/jasmine/jasmine.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/technology/ory/ory.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/technology/hugo/hugo.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /app/about/page.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Hero, Project, IconShowcase, Features, QuickStart, Community } from "@/components/about"; 3 | import { SITE } from "@/constants/site"; 4 | 5 | export const metadata: Metadata = { 6 | title: `About · ${SITE.name}`, 7 | description: 8 | "Learn about Coloured Icons, a CDN-first icon library with simple based usage and Font Awesome-like sizing.", 9 | alternates: { canonical: "/about" }, 10 | }; 11 | 12 | export default function About() { 13 | return ( 14 |
15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 |
24 |
25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /components/filter/CategoryList.tsx: -------------------------------------------------------------------------------- 1 | import { Category } from "@/interfaces"; 2 | import { CategoryButton } from "."; 3 | 4 | interface Props { 5 | categories: Category[]; 6 | selectedCategory: Category; 7 | onCategoryChange: (category: Category) => void; 8 | } 9 | 10 | export const CategoryList: React.FC = ({ 11 | categories, 12 | selectedCategory, 13 | onCategoryChange, 14 | }) => { 15 | return ( 16 |
17 | {categories.map((category: Category) => ( 18 | 24 | ))} 25 |
26 | ); 27 | }; 28 | -------------------------------------------------------------------------------- /public/logos/technology/zod/zod.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/automobile/tesla/tesla-wordmark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/logos/technology/eslint/eslint.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/spring/spring.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/storybook/storybook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/webflow/webflow.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /hooks/useSearchShortcuts.ts: -------------------------------------------------------------------------------- 1 | import { useEffect } from "react"; 2 | 3 | /** 4 | * Focuses the provided input when focusTrigger changes and adds Cmd/Ctrl+K shortcut. 5 | */ 6 | export default function useSearchShortcuts( 7 | ref: React.RefObject, 8 | focusTrigger: number 9 | ) { 10 | // Focus when parent triggers it 11 | useEffect(() => { 12 | if (focusTrigger) { 13 | ref.current?.focus(); 14 | } 15 | }, [focusTrigger, ref]); 16 | 17 | // Cmd/Ctrl + K to focus 18 | useEffect(() => { 19 | const down = (e: KeyboardEvent) => { 20 | if (e.key === "k" && (e.metaKey || e.ctrlKey)) { 21 | e.preventDefault(); 22 | ref.current?.focus(); 23 | } 24 | }; 25 | 26 | document.addEventListener("keydown", down); 27 | return () => document.removeEventListener("keydown", down); 28 | }, [ref]); 29 | } 30 | -------------------------------------------------------------------------------- /public/logos/pharmaceuticals/merck/merck.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /public/logos/technology/resend/resend.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/logos/technology/resend/resend-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/logos/technology/xamarin/xamarin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/emberjs/emberjs.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/ngrx/ngrx.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/technology/sentry/sentry.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/technology/visualbasic/visualbasic.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/unity/unity.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/instruments/flute/flute.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /public/logos/technology/vitest/vitest.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/nim/nim.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/technology/zig/zig.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/clothing and apparel/nike/nike.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /public/logos/financial services/phonepe/phonepe.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 8 | 9 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /public/logos/technology/google/google.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /public/logos/technology/pyscript/pyscript.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/logos/art and music/spotify/spotify.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/filter/IconList.tsx: -------------------------------------------------------------------------------- 1 | import { IconCard } from "."; 2 | import { Icon, Category } from "@/interfaces"; 3 | import useFilteredIcons from "@/hooks/useFilteredIcons"; 4 | 5 | interface IconListProps { 6 | icons: Icon[]; 7 | selectedCategory: Category; 8 | handleIconClick: (icon: Icon) => void; 9 | search: string; 10 | } 11 | 12 | export const IconList: React.FC = ({ 13 | icons, 14 | selectedCategory, 15 | handleIconClick, 16 | search, 17 | }) => { 18 | const filteredIcons = useFilteredIcons({ 19 | icons, 20 | search, 21 | selectedCategory, 22 | }); 23 | 24 | return ( 25 |
    26 | {filteredIcons.map((icon) => ( 27 |
  • 28 | handleIconClick(icon)} /> 29 |
    • 30 | ))} 31 |
32 | ); 33 | }; 34 | -------------------------------------------------------------------------------- /public/logos/clothing and apparel/nike/nike-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /public/logos/technology/php/php.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/yaml/yaml.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /public/logos/art and music/behance/behance3.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/nixos/nixos.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/openstack/openstack.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/social media/twitch/twitch.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | Asset 2 8 | 9 | 10 | 11 | 12 | 13 | 14 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /public/logos/technology/moleculer/moleculer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/logos/technology/erlang/erlang-vertical2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/jiraalign/jiraalign.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/grafbase/grafbase.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/netflix/netflix.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/github/github-light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/github/github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/jira/jira.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/codeigniter/codeigniter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/sublime/sublime.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/social media/discord/discord.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/fortran/fortran.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/logos/financial services/cashfree/cashfree.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /public/logos/technology/firebase/firebase.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 10 | 11 | 12 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /components/filter/Selected.tsx: -------------------------------------------------------------------------------- 1 | import { Check } from "lucide-react"; 2 | import { cn } from "@/lib/utils"; 3 | 4 | interface SelectedProps { 5 | selected: boolean; 6 | active: boolean; 7 | category: { name: string }; 8 | } 9 | 10 | export const Selected: React.FC = ({ 11 | selected, 12 | active, 13 | category, 14 | }) => { 15 | return ( 16 | <> 17 | 25 | {category.name} 26 | 27 | {selected && ( 28 | 34 | 36 | )} 37 | 38 | ); 39 | }; 40 | -------------------------------------------------------------------------------- /public/logos/pharmaceuticals/sanofi/sanofi.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /public/logos/technology/lightroom/lightroom.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/messenger/messenger.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/redhat/redhat.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/codefresh/codefresh.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/appwrite/appwrite.svg: -------------------------------------------------------------------------------- 1 | 3 | 6 | 9 | -------------------------------------------------------------------------------- /public/logos/technology/css/css-vertical.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/gatling/gatling.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /components/filter/CategoryButton.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from "@/components/ui/button"; 2 | import { Category } from "@/interfaces"; 3 | import { CategoryIcon } from "."; 4 | 5 | interface CategoryButtonProps { 6 | category: Category; 7 | isSelected: boolean; 8 | onClick: (category: Category) => void; 9 | } 10 | 11 | export const CategoryButton: React.FC = ({ 12 | category, 13 | isSelected, 14 | onClick, 15 | }) => { 16 | return ( 17 | 30 | ); 31 | }; 32 | -------------------------------------------------------------------------------- /public/logos/technology/elm/elm-horizontal.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/shotgrid/shotgrid.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /components/ui/input.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | function Input({ className, type, ...props }: React.ComponentProps<"input">) { 6 | return ( 7 | 18 | ) 19 | } 20 | 21 | export { Input } 22 | -------------------------------------------------------------------------------- /public/logos/technology/vimeo/vimeo2.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 8 | 9 | 10 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /public/logos/technology/qt/qt.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/technology/json/json.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/r/r.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/gitpod/gitpod.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/technology/railway/railway-light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/railway/railway.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/filter/CategoryIcon.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Grid3x3, 3 | Palette, 4 | Car, 5 | Shirt, 6 | GraduationCap, 7 | DollarSign, 8 | UtensilsCrossed, 9 | Pill, 10 | Hash, 11 | Cpu, 12 | Plane, 13 | Music, 14 | Rabbit, 15 | type LucideIcon, 16 | } from "lucide-react"; 17 | 18 | const margin = "mr-2"; 19 | 20 | const iconMap: Record = { 21 | all: Grid3x3, 22 | "art and music": Palette, 23 | automobile: Car, 24 | "clothing and apparel": Shirt, 25 | education: GraduationCap, 26 | "financial services": DollarSign, 27 | "food and beverage": UtensilsCrossed, 28 | pharmaceuticals: Pill, 29 | "social media": Hash, 30 | technology: Cpu, 31 | "travel and tourism": Plane, 32 | instruments: Music, 33 | animals: Rabbit, 34 | }; 35 | 36 | export const getCategoryIcon = (categoryName: string) => { 37 | const Icon = iconMap[categoryName.toLowerCase()]; 38 | return Icon ? : null; 39 | }; 40 | 41 | export const CategoryIcon = ({ name }: { name: string }) => 42 | getCategoryIcon(name); 43 | -------------------------------------------------------------------------------- /public/logos/technology/gitlab/gitlab.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/logos/technology/infura/infura.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /public/logos/technology/insomnia/insomnia.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/logos/technology/junit/junit.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /constants/site.ts: -------------------------------------------------------------------------------- 1 | // Central site metadata used across SEO, sitemap, and social cards 2 | // Update NEXT_PUBLIC_SITE_URL in your env to override deployment URL 3 | 4 | export const SITE = { 5 | name: "Coloured Icons", 6 | description: 7 | "Coloured Icons is a fast, CDN-first library of brand, tech, and category icons you can use with a single tag—no installs.", 8 | // Prefer env, fallback to repo-friendly default and localhost in dev 9 | url: 10 | (typeof process !== "undefined" && process.env.NEXT_PUBLIC_SITE_URL) || 11 | "https://coloured-icons.vercel.app", 12 | creator: "Dheeresh Agarwal", 13 | twitter: "@dheereshag", 14 | keywords: [ 15 | "icons", 16 | "colored icons", 17 | "coloured icons", 18 | "brand icons", 19 | "svg icons", 20 | "cdn icons", 21 | "web icons", 22 | "react icons", 23 | "nextjs icons", 24 | "fontawesome sizing", 25 | ], 26 | themeColor: "#111827", // gray-900 27 | repoUrl: "https://github.com/dheereshag/coloured-icons", 28 | } as const; 29 | 30 | export type SiteConfig = typeof SITE; 31 | -------------------------------------------------------------------------------- /public/logos/art and music/pinterest/pinterest.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 12 | 13 | 14 | --------------------------------------------------------------------------------