Usage Guide

On this page

Getting Started

Embark on your design journey with Bangalicon! Access an expansive library of icons instantly through our CDN infrastructure. Simplify your projects with seamless integration and customizable options. Whether you're a novice or a seasoned pro, Bangalicon empowers you to bring your creative visions to life. Get started and elevate your designs today!

What Bangalicon includes

Bangalicon is built as one library with multiple ways to use it. You can load icons through the public CSS file, download the packaged assets for local projects, or use direct framework packages when working in React, Vue, or Svelte. That keeps the icon naming consistent across design, development, and export workflows.

The system currently supports three icon groups: bg for regular icons, bgs for solid icons, and bgl for brand-style marks. This makes it easy to scan class names and understand the icon type immediately.

Quick install flow

If you want the fastest setup, use the public stylesheet and start with HTML classes. If you are building an app with a component framework, install the matching package instead. Designers using Figma can use the plugin and keep names aligned with the web library.

1. Load Bangalicon with CDN or local CSS.
2. Choose the correct icon family prefix: bg, bgs, or bgl.
3. Apply size and color with normal CSS rules.
4. Move to React, Vue, or Svelte packages when your project needs components.

Usage as a Font

Import the CSS

Copy the stylesheet link and paste into your header to load our CSS.

<link rel="stylesheet" href="https://api.bangalicon.com/cdn/free/bangalicon-free.css">

This will load bangalicon font into your web.

Basic usage

To use an icon on your page, add a prefix bg for regular icons, bgs for solid icons & bgl for logos followed by the icon name and seperate class with the bg.

<i class="bg bg-cart-check"></i> <!---regular--->
<i class="bgs bgs-check-circle"></i> <!---solid--->
<i class="bgl bgl-pinterest"></i> <!---brand--->

Each icon has a regular and solid variant. Also bangalicon has Brand icons.

Use the font workflow when you want the lightest possible integration and full control through CSS classes. This is especially useful for landing pages, static sites, server-rendered projects, CMS templates, and fast prototypes.

Template

Create an HTML document and copy the template and past on your HTML project

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bangalicon CSS --->
<link rel="stylesheet" href="https://api.bangalicon.com/cdn/free/bangalicon-free.css">
<title>Document</title>
</head>
<body>
<!-- Icon --->
<i class="bg-check-circle"></i>
</body>
</html>

This template is the best starting point if you are testing icons outside a framework first. Once your icon names, sizing, and color rules feel right, you can move the same setup into your production project.

Packages

Bangalicon also supports direct package integration for modern frontend stacks. Use the package that fits your project and keep your icon workflow consistent across React, Vue, Svelte, and Figma.

React

@bangalicon/react

Use the React package when you want tree-shakeable icon components with direct prop control for size, color, opacity, className, and standard SVG attributes.

Installation

npm install @bangalicon/react
# or
yarn add @bangalicon/react
# or
pnpm add @bangalicon/react

Quick start

import { CartCheck } from "@bangalicon/react";

export default function Example() {
  return <CartCheck size={24} color="#111111" />;
}

Tree-shakeableRegular / Solid / BrandSVG propsTypeScript ready

Vue

@bangalicon/vue

Choose the Vue package when your project needs icon components inside templates, props for styling, and a naming system that stays aligned with the Bangalicon web library.

Installation

npm install @bangalicon/vue
# or
yarn add @bangalicon/vue
# or
pnpm add @bangalicon/vue

Quick start

<script setup>
import { CartCheck } from "@bangalicon/vue";
</script>

<template>
  <CartCheck :size="24" color="#111111" />
</template>

Composition friendlyRegular / Solid / BrandSVG propsTypeScript ready

Svelte

@bangalicon/svelte

Pick the Svelte package when you want clean component imports, fast rendering, and easy control through normal component props without switching back to font classes.

Installation

npm install @bangalicon/svelte
# or
yarn add @bangalicon/svelte
# or
pnpm add @bangalicon/svelte

Quick start

<script>
  import { CartCheck } from "@bangalicon/svelte";
</script>

<CartCheck size={24} color="#111111" />

Component basedRegular / Solid / BrandSVG propsTypeScript ready

Figma Plugin

Community plugin

Use the Bangalicon Figma plugin when you want to browse icons directly inside your design workflow. It gives designers quick access to the same library your frontend team uses on the web.

1. Open the Bangalicon plugin page in Figma.
2. Install the plugin into your workspace.
3. Search and insert icons directly into your designs.
4. Keep design and development aligned with the same icon names.

Open Figma Plugin

Framework props

The framework packages are built around direct component props. Use the component by name, then pass only the adjustments you need for that screen. That keeps the JSX, Vue template, or Svelte markup readable while staying consistent with the icon modal examples on the main site.

<CartCheck size={24} color="#db161b" opacity={0.8} />

Tree shaking

Bangalicon packages are meant to be imported icon by icon. That means your final app only carries the components you actually use instead of bundling the full library into every page.

// Only CartCheck is bundled
import { CartCheck } from "@bangalicon/react";

Naming convention

Bangalicon converts icon slugs into component-friendly names. A kebab-case icon such as cart-check becomes CartCheck. This keeps framework packages natural to use while staying aligned with the search and class names used across the site.

cart-check -> <CartCheck />
warning-circle -> <WarningCircle />
view-table -> <ViewTable />

TypeScript

The packages are designed to fit nicely into typed projects. You can pass regular SVG attributes alongside Bangalicon props, which makes the components easy to use inside product UI, form systems, and reusable design primitives.

import type { SVGProps } from "react";

type IconProps = SVGProps<SVGSVGElement> & {
  size?: number;
  color?: string;
  opacity?: number;
}

Download use

Download zip

Download the zip file from bangalicon that css is included! Extracting the zip file, you'll find a CSS file, bangalicon.min.css file.

Local download is useful when you want project-level control, offline usage, or a fixed version stored with the rest of your assets. It also works nicely for agencies, template sellers, and internal dashboards that prefer shipping local files.

Using on the web

Reference the extracted stylesheet in your project and keep the font files in the same relative structure for the icons to work properly.

<link rel="stylesheet" href="/assets/bangalicon/bangalicon.min.css">

For production use, keep the CSS file and its related font assets together. If you move the stylesheet into another folder, update the internal font URLs so the browser can still resolve the icon files correctly.

Style

Size

You can control icon size with regular CSS. The font version follows the same sizing pattern as text.

.bg-cart-check {
  font-size: 48px;
}

You can also size icons through utility classes, inherited typography, or inline styles depending on your project structure. The icons behave best when you keep a clear size scale such as 16, 20, 24, 32, 48, and 64 pixels.

Color

Bangalicon icons follow the current color, so changing the text color is enough to recolor your icon.

.bg-cart-check {
  color: #db161b;
}

Opacity

Opacity is useful for hover states, muted UI, empty cards, and layered toolbars. You can control it with normal CSS and combine it with color for softer presentation.

.bg-cart-check {
  opacity: 0.7;
}

Alignment

For buttons, tabs, badges, and nav links, wrap icons in a flex row so they align with text cleanly. This keeps your line-height, spacing, and hover areas predictable across desktop and mobile layouts.

.button-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

Best practice

Naming system

Bangalicon class names are intentionally direct. Keep icon naming tied to what users understand visually, not only what developers think internally. Short, readable names improve search, consistency, and design handoff.

For example, a shopping icon should stay close to terms like cart, basket, checkout, or bag depending on the visual meaning. This makes the library easier to explore and more predictable across teams.

Performance

Use the CSS version when you want the smallest setup cost for simple pages, and use package imports when you want more component control in larger apps. In both cases, try to keep your UI consistent so icons do not jump between unrelated sizes and weights.

A clean icon system improves more than appearance. It reduces naming confusion, speeds up implementation, and keeps the design language stable as the product grows.

Accessibility

If an icon is decorative, hide it from assistive tools. If it communicates meaning, pair it with visible text or an accessible label. Icons work best when they support content rather than replace important copy completely.

<i class="bg bg-eye" aria-hidden="true"></i>

Contribution

Want to improve Bangalicon? You can request icons, report issues, or help shape the next release by sharing practical feedback from your workflow.

The best feedback usually includes the icon need, expected meaning, preferred style family, and a short product context. That helps keep new additions useful for the broader library instead of solving only one isolated screen.

About

Bangalicon is a focused icon system made for fast browsing, simple CDN usage, and clean framework integration across modern frontend stacks.

The goal is simple: one naming language, one visual direction, and multiple ways to use the same icon system across product UI, websites, component frameworks, and design tools.

Back to icons

FAQ

How do I keep icons updated?

If you use the CDN version, new public releases can be reflected automatically depending on your version strategy. If you need a more controlled setup, use a pinned asset version or download the files locally.

Can I mix CSS and package usage?

Yes. Many teams use CSS for marketing pages and framework packages for the main app. That approach works well as long as naming and visual styling stay consistent.

Which icon style should I choose?

Use regular icons for standard interface clarity, solid icons when you need stronger emphasis, and brand icons for services, platforms, and recognizable product marks.