Every project that needs icons eventually faces the same decision: bind the icon library to the framework, or keep it independent. Framework-specific packages are convenient but become dead weight during a migration. Icon fonts carry accessibility and rendering problems. Hand-rolled SVG sprites work but demand maintenance.
SenangStart Icons takes a different position. It does not integrate with any framework. Instead, it exposes the same curated set of icons through three independent mechanisms, letting each part of a project consume icons in whatever form fits that layer.
The three mechanisms
1. Web Component
The primary interface is a custom element, <ss-icon>, distributed as a single minified script:
<script src="https://unpkg.com/@bookklik/senangstart-icons/dist/senangstart-icon.min.js"></script>
<ss-icon icon="check" thickness="2"></ss-icon>
This works in plain HTML with no build step. It also works inside any framework, since custom elements are a browser standard, not a library abstraction.
2. CSS Classes
For server-rendered templates where shipping JavaScript is undesirable, a stylesheet maps each icon to a class:
<link rel="stylesheet" href="https://unpkg.com/@bookklik/senangstart-icons/dist/senangstart.min.css" />
<i class="ss ss-check"></i>
3. Raw Icon Data
For SSR, build scripts, or custom rendering pipelines, the icons are exported directly as SVG strings:
import icons from '@bookklik/senangstart-icons/icons';
const arrowIcon = icons['arrow-right'];
CommonJS is supported as well via require(). The package defines these entry points in its exports map, so bundlers resolve only what is imported.
The practical value of this design is consistency. A typical product spans a static marketing site, a client-rendered dashboard, and a backend generating server-side markup. Without a shared source, each layer tends to accumulate its own icon set, and visual drift follows. Here, all three paths render the same underlying SVG paths.
The thickness attribute
Most icon libraries bake stroke width into the asset. Adjusting visual weight means shipping a second set of icons. SenangStart treats stroke width as a runtime parameter on the web component:
<ss-icon icon="circle" thickness="1"></ss-icon>
<ss-icon icon="circle" thickness="2"></ss-icon>
<ss-icon icon="circle" thickness="3"></ss-icon>
The default is 2.2. Because the SVGs are stroke-based and rendered live, the browser handles the variation. There is no asset duplication and no sprite regeneration when the design specification changes.
Styling model
Icons inherit currentColor, so they behave like text:
<!-- Utility classes, e.g. Tailwind -->
<ss-icon icon="home" class="w-6 h-6 text-blue-500"></ss-icon>
<!-- Inline styles -->
<ss-icon icon="heart" style="font-size: 32px; color: red;"></ss-icon>
Sizing follows font-size, which keeps icons aligned with surrounding text without explicit width and height values. Dark mode, hover states, and animations are ordinary CSS. A spinning loader, for example, is a standard @keyframes rotation applied to the element.
Attributes are also mutable at runtime:
const icon = document.querySelector('ss-icon');
icon.setAttribute('icon', 'check');
icon.setAttribute('thickness', '2');
Icon coverage
The library ships roughly 240 icons on a consistent 24x24 grid with a unified stroke style. The set covers common UI needs: navigation arrows, form controls, charts, calendar variants, device icons, and currency symbols. One detail worth noting is the inclusion of currency-ringgit, the Malaysian Ringgit, alongside the usual dollar, euro, pound, and yen symbols. The project originates from Malaysia, and the icon set reflects that context rather than assuming a US-centric default.
Accessibility is handled through standard attributes. Decorative icons use aria-hidden="true"; meaningful icons use aria-label:
<ss-icon icon="star" aria-hidden="true"></ss-icon>
<ss-icon icon="warning" aria-label="Warning"></ss-icon>
Build and tooling
The repository is MIT-licensed and the toolchain is straightforward:
scripts/build-svgs.jsprocesses source SVGs into the distribution formatscripts/build-css.jsgenerates the class-based stylesheet- Webpack and Babel produce the minified web component bundle
- Vitest covers the component logic, with a coverage script available
- VitePress generates the documentation site, including one page per icon with the live SVG rendered inline
Generating docs, CSS, and bundles from the same source SVGs keeps everything synchronized. Nothing drifts between the documentation and the shipped package.
LLM support
The documentation site publishes an llms.txt file containing the full icon list and usage instructions in a format optimized for AI coding assistants. When an assistant has access to this manifest, it generates icon markup against real icon names rather than guessing. This is a small addition, but it addresses a concrete failure mode: AI-suggested code referencing icons that do not exist in the installed library.
Assessment
SenangStart Icons does not attempt to match the icon count of larger libraries. It offers about 240 consistent, stroke-based icons instead of thousands of inconsistent ones. The tradeoff is deliberate: obscure brand logos will be missing, and those are better inlined from source anyway.
What the library provides is a single icon source that works across plain HTML, CSS-only templates, web components, and server-side rendering. For projects that span multiple of those environments, that combination removes a category of maintenance work that usually goes unaccounted for.
Getting started
npm i @bookklik/senangstart-icons
Documentation: bookklik-technologies.github.io/senangstart-icons
Source and contributions: available on GitHub under the MIT license.