Tala Icons

Quick Start Recommended

Use the tala-* class system. Just add the CSS and JS files, then use class names.

1. Add files to your page

<link rel="stylesheet" href="tala-icons.css">
<script src="tala-icons.js"></script>

2. Use icons with classes

<!-- Basic usage -->
<i class="tala-home"></i>
<i class="tala-search"></i>
<i class="tala-settings"></i>

<!-- With size -->
<i class="tala-home tala-lg"></i>
<i class="tala-home tala-xl"></i>

<!-- With animation -->
<i class="tala-loader tala-spin"></i>
<i class="tala-bell tala-pulse"></i>

<!-- With color -->
<i class="tala-heart" style="color: #ef4444"></i>
<i class="tala-check-circle" style="color: #0ea5e9"></i>

Live Examples

Dynamic Rendering

Call TalaIcons.render() to re-scan the DOM and render any new icons added dynamically.

// After adding icons dynamically
document.body.innerHTML += '<i class="tala-home"></i>';
TalaIcons.render();

Get Icon List

// Get array of all available icon names
console.log(TalaIcons.icons);
// ["home", "search", "settings", "user", ...]

Installation

Download Tala Icons or install via package manager.

npm install tala-icons

<!-- CSS + JS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tala-icons@1.1.0/tala-icons.min.css">
<script src="https://cdn.jsdelivr.net/npm/tala-icons@1.1.0/tala-icons.min.js"></script>

<link rel="stylesheet" href="https://unpkg.com/tala-icons@1.1.0/tala-icons.min.css">
<script src="https://unpkg.com/tala-icons@1.1.0/tala-icons.min.js"></script>

<!-- Tailwind-compatible version -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tala-icons@1.1.0/tala-icons.tailwind.min.css">

<!-- Load specific icon SVGs -->
<img src="https://cdn.jsdelivr.net/npm/tala-icons@1.1.0/icons/home.svg" width="24">

<link rel="stylesheet" href="tala-icons.min.css">
<script src="tala-icons.min.js"></script>

Basic Usage

Tala Icons are standard SVG files. Use them inline in HTML, or import as components.

Inline SVG

Copy the SVG code directly into your HTML. This gives you full control.

<svg xmlns="http://www.w3.org/2000/svg"
  width="24" height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round">
  <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
  <polyline points="9 22 9 12 15 12 15 22"/>
</svg>

Image Tag

Reference the SVG file directly.

<img src="icons/home.svg" alt="Home" width="24" height="24">

Framework Components

Import Tala Icons into your favorite framework.

// Icon component
const Icon = ({ name, size = 24, color = 'currentColor', ...props }) => {
  const svg = require(`./icons/${name}.svg`);
  return (
    <img
      src={svg}
      width={size}
      height={size}
      style={{ color }}
      alt={""}
      aria-hidden={"true"}
      {...props}
    />
  );
};

// Usage
<Icon name="home" />
<Icon name="search" size={32} color="#0ea5e9" />

<!-- TalaIcon.vue -->
<template>
  <img
    :src=`/icons/${name}.svg`
    :width="size"
    :height="size"
    :style="{ color }"
    aria-hidden="true"
  />
</template>

<script>
export default {
  props: {
    name: { type: String, required: true },
    size: { type: Number, default: 24 },
    color: { type: String, default: 'currentColor' }
  }
}
</script>

<!-- TalaIcon.svelte -->
<script>
  export let name;
  export let size = 24;
  export let color = 'currentColor';
</script>

<img
  src="icons/{name}.svg"
  width={size}
  height={size}
  style="color: {color}"
  aria-hidden="true"
/>

<!-- Include Tala Icons -->
<script src="tala-icons.js"></script>

<!-- Use data-tala attribute -->
<i data-tala="home"></i>

<!-- Tailwind size classes -->
<i data-tala="home" class="w-4 h-4"></i>     <!-- 16px -->
<i data-tala="home" class="w-5 h-5"></i>     <!-- 20px -->
<i data-tala="home" class="w-6 h-6"></i>     <!-- 24px -->
<i data-tala="home" class="w-8 h-8"></i>     <!-- 32px -->
<i data-tala="home" class="w-10 h-10"></i>   <!-- 40px -->

<i data-tala="heart" class="text-red-500"></i>
<i data-tala="check-circle" class="text-green-500"></i>
<i data-tala="info" class="text-blue-500"></i>

<!-- Use Tailwind's animate utilities -->
<i data-tala="loader" class="animate-spin"></i>
<i data-tala="bell" class="animate-pulse"></i>

<!-- Or use Tala's animation classes -->
<i data-tala="loader" class="tala-spin"></i>

<!-- Button with icon -->
<button class="flex items-center gap-2 px-4 py-2 bg-green-500 text-white rounded">
  <i data-tala="plus" class="w-4 h-4"></i>
  Add Item
</button>

<!-- Icon button -->
<button class="p-2 hover:bg-gray-100 rounded">
  <i data-tala="settings" class="w-5 h-5 text-gray-600"></i>
</button>

<!-- Navigation -->
<nav class="flex gap-4">
  <a href="#" class="flex items-center gap-2">
    <i data-tala="home" class="w-5 h-5"></i>
    Home
  </a>
  <a href="#" class="flex items-center gap-2">
    <i data-tala="search" class="w-5 h-5"></i>
    Search
  </a>
</nav>

API Reference

SVG Attributes

File Naming

Sizing

Icons default to 24x24. Resize with CSS or width/height attributes.

<!-- Set size via attributes -->
<svg width="32" height="32" ...>...</svg>

<!-- Or via CSS -->
<style>
  .icon-lg { width: 32px; height: 32px; }
  .icon-xl { width: 48px; height: 48px; }
</style>

Recommended Sizes

Colors

Tala Icons use currentColor, so they inherit the text color of their parent. Change colors with CSS.

<!-- CSS -->
.icon-success { color: #0ea5e9; }
.icon-danger  { color: #ef4444; }
.icon-info    { color: #3b82f6; }

<!-- Or inline style -->
<svg style="color: red" ...>...</svg>

CSS Styling

Fine-tune icons with standard CSS properties.

.icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vertical-align: middle;
}

/* Filled variant */
.icon-filled {
  fill: currentColor;
  stroke: none;
}

/* With background */
.icon-circle {
  background: #0ea5e9;
  border-radius: 50%;
  padding: 8px;
  color: #fff;
}

Hover Effects

.icon-btn {
  transition: transform 0.15s, color 0.15s;
}
.icon-btn:hover {
  transform: scale(1.1);
  color: #0ea5e9;
}

Animation

Add motion to icons with CSS transitions and keyframes.

Spin

Perfect for loading states.

@keyframes spin {
  to { transform: rotate(360deg); }
}
.icon-spin {
  animation: spin 1s linear infinite;
}

Pulse

Draw attention to notifications.

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.icon-pulse {
  animation: pulse 2s ease-in-out infinite;
}

Bounce

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.icon-bounce {
  animation: bounce 1s ease infinite;
}

Accessibility

Make icons accessible to all users.

Decorative Icons

If the icon is purely decorative, hide it from screen readers.

<svg aria-hidden="true" ...>...</svg>

Meaningful Icons

If the icon conveys meaning, add a label.

<svg role="img" aria-label="Home">
  <title>Home</title>
  ...
</svg>

Icon Buttons

When an icon is the only content in a button, add an accessible label.

<button aria-label="Close">
  <svg aria-hidden="true" ...>...</svg>
</button>

FAQ

Can I use Tala Icons in commercial projects?

Yes. MIT License means you can use them anywhere, including commercial products.

Do I need to provide attribution?

No. Attribution is appreciated but not required.

Can I modify the icons?

Yes. Edit the SVGs, change colors, stroke widths, or combine them however you want.

What file format are the icons?

SVG (Scalable Vector Graphics). They work everywhere — browsers, React, Vue, iOS, Android, Figma, and more.

How do I request a new icon?

Open an issue on the GitHub repository with your request.

Can I contribute?

Yes! Contributions are welcome. See the contributing guide on GitHub.

License

Tala Icons is licensed under the MIT License.

• Free for personal and commercial use
• No attribution required
• Can be modified and redistributed

Copyright © 2026 Tala Icons