Getting Started
Reicon Brands is loaded with over 3,400+ optimized brand logos that render inside a single, fast HTML Custom Element. You can get started either using NPM or directly linking the global CDN in your markup.
Installation via NPM
Install the package to bundle it locally inside your React, Vue, Svelte, or Webpack/Vite app:
Installation via CDN
Paste this single script block into your HTML <head> to load Reicon Brands globally instantly:
<script src="https://cdn.reicon.dev/cdn/reicon-brands.min.js"></script>
HTML Custom Element (Web Component)
Once loaded, Reicon Brands defines the custom element <re-brand>. You can write it anywhere inside your document just like a native element.
Basic Syntax
<re-brand icon="github"></re-brand>
Supported Attributes
Customize the presentation by editing attributes directly on the element. Reicon automatically listens to dynamic changes and updates on the fly:
| Attribute |
Type |
Default |
Description |
icon |
String |
- |
The slug of the brand to load (e.g. google, figma, airbnb). Case-insensitive. |
size |
Number / String |
24px |
Sizing height and width (e.g., 32, 32px, 2.5rem). Supports automatic unit parsing. |
color |
String |
currentColor |
The fill color of the vector. Can be standard CSS color name, Hex code, or currentColor to inherit parent color. |
loading |
lazy | eager |
eager |
Setting to lazy will postpone icon rendering until the element enters the visible screen viewport. Useful for very large grids! |
Example: Custom Styling
<re-brand icon="figma" size="48px" color="#F24E1E"></re-brand>
React Integration
Because Reicon Brands compiles as standard HTML5 Web Components, it integrates seamlessly into React. Simply import the module once in your entrypoint (like index.js or main.jsx) to register the element globally.
1. Import in Entrypoint
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import 'reicon-brands'; // Registers custom element globally
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
2. Render in Component
Write the registered component directly in your JSX. (Note: in React 18, use standard attribute names like class, icon, size):
export default function BrandBadge() {
return (
<div className="badge-row">
<h3>Social Logins</h3>
<re-brand icon="google" size="24" />
<re-brand icon="facebook" size="24" color="#1877F2" />
</div>
);
}
JavaScript API Reference
Loading Reicon Brands exposes a powerful global controller object window.ReiconBrands. This API gives you complete programmatic control over the loaded icons metadata.
| Method / Property |
Return Type |
Description |
ReiconBrands.icons |
Array<String> |
An array containing the slugs of all 3,456 available icons. |
ReiconBrands.count |
Number |
Getter returning the total quantity of brand icons in the library. |
ReiconBrands.getTitle(slug) |
String | null |
Fetches the formal, user-friendly title of the brand matching the slug (e.g. getTitle('youtube') returns "YouTube"). |
ReiconBrands.getHex(slug) |
String | null |
Fetches the authentic brand color hex string without the leading '#' (e.g., getHex('slack') returns "4A154B"). |
ReiconBrands.search(query) |
Array<String> |
Performs a highly optimized internal substring match against icon slugs and titles, returning a filtered array of slugs. |
Programmatic Searching Example
// Perform client-side searches dynamically
const matches = ReiconBrands.search('git');
console.log(matches); // ['git', 'github', 'github-actions', 'gitlab', 'gitpod']
// Fetch brand metadata on matching slug
const hex = ReiconBrands.getHex('github');
const title = ReiconBrands.getTitle('github');
console.log(`${title} hex code: #${hex}`); // "GitHub hex code: #181717"
