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.
<i> tag syntax with CSS classes.ci-2xs to ci-10x.ci-invert class for theme compatibility.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>
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.
Future These Companies Say AI Is Reviving Entry-Level Jobs, Not Killing ThemLindsay Ellis | The…
Marketing has always been about timing, relevance, and consistency. The challenge is that most teams…
Marketing has always been about timing, relevance, and consistency. The challenge is that most teams…
Artificial intelligence is often associated with language models, robotics, or financial forecasting. Yet one of…
Artificial intelligence is often associated with language models, robotics, or financial forecasting. Yet one of…
Most sales teams today are not short on leads or effort. They’re short on timely execution. Leads are coming…
This website uses cookies.