Figma Icons Source

ALS Icons Library

This package provides a set of optimized SVG icons exported from Figma, designed for easy use in web projects. All icons are processed to use fill="currentColor" for flexible theming.

ALS Icons Library

ALS Icons Library is a collection of high-quality, production-ready SVG icons exported from Figma and optimized for modern web development. Each icon is processed to use fill="currentColor", making them easy to style and integrate into any design system or application.

Features

• 100% SVG, no dependencies
• Consistent, pixel-perfect icons
• Optimized with SVGO for minimal file size
• All icons use fill="currentColor" for easy theming
• Ready for use in React, Vue, Angular, plain HTML, and more
• Includes both ESM and CommonJS exports

Installation

Install the package via npm:

npm install @als-computing/icons

Or with yarn:

SVG files are automatically pushed to the `assets/` folder by the Figma plugin.

Usage

1. Importing an Icon in JavaScript/TypeScript

ESM (ES Modules)

import IconName from '@als-computing/icons/dist/IconName.js';

// Example: Render in React
function App() {
	return (
		<span style={{ color: 'red' }}>
			<span dangerouslySetInnerHTML={{ __html: IconName }} />
		</span>
	);
}

CommonJS

const IconName = require('@als-computing/icons/dist/IconName.js');
// Use IconName as SVG markup

2. Using Icons Directly in HTML

Copy the SVG markup from the icon file and paste it into your HTML:

<span style="color: blue">
	<!-- Paste SVG markup here -->
</span>

Theming & Customization

All icons are exported with fill="currentColor" on the root <svg> element. This means the icon will automatically inherit the text color of its parent element. You can easily change the icon color using CSS or utility frameworks like Tailwind CSS.

Using CSS

.icon-red {
	color: red;
}
.icon-primary {
	color: #1976d2;
}

<span class="icon-red">
	<!-- SVG icon here will be red -->
</span>

You can also set the color inline:

<span style="color: green">
	<!-- SVG icon here will be green -->
</span>

Using Tailwind CSS

You can use Tailwind's text color utilities to style your icons instantly:

<span class="text-blue-500">
	<!-- SVG icon here will be blue -->
</span>

<span class="text-gray-700 dark:text-gray-200">
	<!-- SVG icon here will be gray in light mode, light gray in dark mode -->
</span>

<span class="text-xl">
	<!-- SVG icon here will be extra large -->
</span>

You can also combine Tailwind classes for size and color:

<span class="text-red-600 text-2xl">
	<!-- SVG icon here will be red and 2xl size -->
</span>

How It Works

• All SVGs are optimized and cleaned using SVGO.
• The fill attribute is removed from all child elements and set to currentColor on the root <svg>.
• This allows you to control the icon color from CSS or inline styles, making the icons highly flexible and themeable.

License

MIT © ALS Computing

When new assets are committed, this repository automatically triggers the icon-library repository to process, optimize, and publish the icons to npm.

Folder Structure

• assets/ - Raw SVG files from Figma (auto-populated by Figma plugin)