By rssfeeds-admin 
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-2xstoci-10x. - Color inversion: Built-in
ci-invertclass 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/coloured-icons@1.9.4/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.
The post Brand Logos & Tech Stack Icons for Web Dev – Coloryfy.css appeared first on CSS Script.
Discover more from RSS Feeds Cloud
Subscribe to get the latest posts sent to your email.