Skip to content

The colored icons library is a collection of brand logos and tech stack logos. It's a handy resource to easily add brand icons to your projects without the hassle of manual attribution.

Notifications You must be signed in to change notification settings

dheereshagrwal/colored-icons

Repository files navigation

Colored Icons

Sample icons

Spotify Icon React Icon Vue.js Icon Redis Icon Firebase Icon Instagram Icon Python Icon JavaScript Icon HTML5 Icon CSS3 Icon Node.js Icon MongoDB Icon PostgreSQL Icon Java Icon Angular Icon Nuxtjs Icon Solana Icon Docker Icon Kubernetes Icon

Throw in a CDN and watch the magic happen! Don't bother with all that npm stuff, just use the easy <i> tag. It's a bunch of logos from different brands and tech stacks. You can just use these awesome icons in your projects without ever dealing with any downloads

Features

  • Super easy integration into your web projects using the <i> tag
  • Change the size of icons, just like Font Awesome icons
  • Flip the colors of icons using the ci-invert class

Installation

To use the Colored Icons Library, simply add the following CDN link to your HTML file (Be careful with the release versions, they might include breaking changes):

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/dheereshagrwal/[email protected]/src/app/ci.min.css"
/>

Usage

<i class="ci ci-spotify ci-2x"></i>

<i class="ci ci-git ci-md"></i>

<i class="ci ci-nuxtjs ci-5x"></i>

<i class="ci ci-azure ci-sm"></i>

<i class="ci ci-redis ci-3x"></i>

Inverting the color

If you want to invert the color for some reason, just add ci-invert.

<i class="ci ci-postman ci-2x ci-invert"></i>

Sizing

I used the same sizing style used by font awesome:

ci-2xs ci-xs ci-sm ci-md ci-lg ci-xl ci-2xl

ci-1x ci-2x ci-3x ci-4x ci-5x ci-6x ci-7x ci-8x ci-9x ci-10x

For more details about the sizing, you can refer to this Font Awesome Icon Size Documentation

Dark and Light icons

By default, the ci-nextjs will refer to the dark version of the logo which means that you have to use it on a light background, you can also write ci-nextjs-dark for the same. Just don't write ci-nextjs ci-dark, dark is not some class that can be applied to colored icons.

ci-nextjs

Similarly, ci-nextjs-light refers to the light version of the icon which means that you have to use it on a dark background. Note that not every brand has dark and/or light icons

Horizontal (Inline), Vertical (Stacked), and Wordmark icons

ci-infura-wordmark refers to the wordmark icon of the brand. If you don't understand what it means, you can refer to this Infura Press Kit

Infura Wordmark

ci-whatsapp-horizontal or ci-whatsapp-inline refers to the horizontal/inline icon with the logo on the left and wordmark on the right.

Whatsapp Horizontal

Similarly, ci-whatsapp-vertical or ci-whatsapp-stacked refers to the vertical/stacked icon with the logo on top and wordmark on the bottom. If you wish to know more about the naming convention, refer to this Alan Brand Assets.

Note that not every brand has horizontal and/or vertical icons.

Whatsapp Vertical

Second version

Some icons have a second version of them provided which is a darker shade of the original such as

ci ci-mongodb2

MongoDB2 Icon

ci ci-mongodb

MongoDB Icon

Contribution

The code is very lightweight and dead simple; there is nothing fancy going on. Please note that we use pnpm for faster builds.

Guidelines for naming

logo -> {company}.svg

wordmark (text) -> {company-wordmark}.svg

logo + wordmark -> {company-horizontal}.svg

If you want me to add an icon that is missing or have some suggestions, just raise an issue.

License

The Colored Icons Library is licensed under the MIT License. Please review the license file for more details.

Contact πŸ‘‹πŸ»

Visit my personal website