Brand Logos & Tech Stack Icons for Web Dev – Coloryfy.css

Category: CSS & CSS3 | August 1, 2025
0 Comment
Authorprachimittal26
Last UpdateAugust 1, 2025
LicenseMIT
Tags
Views91 views
OfficialGo to website
Live DemoDownload
Brand Logos & Tech Stack Icons for Web Dev – Coloryfy.css

Coloryfy is a CSS/SVG icon library that provides a collection of scalable brand and tech stack logos.

You can easily display these brand icons in your HTML page through a simple CDN link. No need to download and manage individual SVG files.

Features:

  • CDN-based delivery: No npm installations or build configurations required.
  • Font Awesome-style implementation: Uses familiar <i> tag syntax with CSS classes.
  • Icon sizing options: Fourteen different size classes from ci-2xs to ci-10x.
  • Color inversion: Built-in ci-invert class for theme compatibility.
  • Multiple logo variants: Supports wordmark, horizontal, vertical, and stacked layouts.
  • Light and dark versions: Separate classes for different background compatibility.

How to use it:

1. Add the CDN link to your HTML’s <head> section.

<!-- Pin to a specific version for stability -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/dheereshagrwal/[email protected]/src/app/ci.min.css"
/>
<!-- Or use the latest version (use with caution) -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/dheereshagrwal/coloured-icons@master/src/app/ci.min.css"
/>

2. To use an icon, you first find the one you need on the Coloryfy website. Then, you copy its class name and place it inside an <i> tag.

<i class="ci ci-spotify"></i>
<i class="ci ci-react"></i>
<i class="ci ci-mongodb"></i>

3. Or reference SVG files through the img tag:

<img src="public/logos/art and music/spotify/spotify.svg" width="32px">

4. Control the size of the icons with a set of utility classes. There are two types: relative sizing (ci-lg, ci-xl) and fixed multipliers (ci-2x, ci-9x).

<!-- Relative sizing -->
<i class="ci ci-nextjs ci-lg"></i>
<!-- Multiplier sizing -->
<i class="ci ci-nextjs ci-2x"></i>

5. For dark backgrounds, you can add the ci-invert class. This applies a CSS filter: invert(1) rule, which works well for monochrome logos but might produce odd results on multi-color ones.

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

6. Some icons, like Next.js, have default dark text that is hard to see on a dark background. The library provides light variants for this. For example, ci-nextjs is for light backgrounds, while ci-nextjs-light is for dark backgrounds. You have to check the website to see which icons support this.

<!-- For light backgrounds -->
<i class="ci ci-nextjs"></i>
<!-- For dark backgrounds -->
<i class="ci ci-nextjs-light"></i>

7. The library also supports different logo compositions based on brand guidelines:

<!-- Wordmark only (text-based logos) -->
<i class="ci ci-infura-wordmark"></i>
<!-- Horizontal layout (logo + text side by side) -->
<i class="ci ci-whatsapp-horizontal"></i>
<i class="ci ci-whatsapp-inline"></i>
<!-- Vertical layout (logo above text) -->
<i class="ci ci-whatsapp-vertical"></i>
<i class="ci ci-whatsapp-stacked"></i>

9. A few icons have a second version with a darker shade, like ci-mongodb2.

<i class="ci ci-mongodb"></i>
<i class="ci ci-mongodb2"></i>

Performance Considerations

The CDN approach means your first page load includes the entire icon font, which adds approximately 190KB to your initial bundle.

For applications using only a few icons, consider downloading specific SVG files instead.

The trade-off becomes favorable when using more than 10-15 different brand icons.

See Also:

You Might Be Interested In:

Leave a Reply