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 (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"
/>
<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-postman 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
The code is very lightweight and dead simple; there is nothing fancy going on.
Please note that we use pnpm for faster builds.
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.
The Colored Icons Library is licensed under the MIT License. Please review the license file for more details.