Sample icons
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
- 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-invertclass
To use the Colored Icons Library, simply add the following CDN link to your HTML file:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/dheereshagrwal/colored-icons@master/ci.min.css"
/>
<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>
If you want to invert the color for some reason, just add ci-invert.
<i class="ci ci-highonswift ci-2x ci-invert"></i>
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
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
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
ci-whatsapp-horizontal or ci-whatsapp-inline refers to the horizontal/inline icon with the logo on the left and wordmark on the right.
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.
Some icons have a second version of them provided which is a darker shade of the original such as
ci ci-mongodb2
ci ci-mongodb
I also added some Google fonts in the CSS file. You can just add a class font-inter font-poppins font-karla font-dm-sans font-lato font-dancing-script font-pacifico font-nunito font-rubik font-epilogue font-sora font-montserrat to your existing class and the text will be changed. Enjoy!
The code is very lightweight and dead simple; there is nothing fancy going on. If you want me to add an icon that is missing or have some suggestions, just raise an issue
The Colored Icons Library is licensed under the MIT License. Please review the license file for more details.
