An icon library is more than a folder of SVG files. It needs consistent names, predictable weights, a clear import strategy and documented accessibility rules.

Icons Creator exports CSS, JavaScript and TypeScript manifests plus files for each weight. The package can be installed globally or imported only by the components that need it.

Standardize names and variants

Use accent-free, space-free names, preferably kebab-case. Avoid generic names such as icon-1. Names should describe function, such as user-add, warning-circle or download.

When weights are available, keep the same set across the library so components do not request missing variants.

Choose global or local installation

Global installation is convenient when many screens share the same set. The CSS loads once and components use classes. Local imports reduce scope and can be better for small applications or strongly separated routes.

Do not mix both approaches without a reason. Establish one convention and document the extraction path.

// Vue / Quasar - global installation
import './assets/icons-library/icons.css'

<span class="ic ic-download ic-regular" aria-hidden="true"></span>

Integrate with each framework

In Vue, Nuxt and Quasar, register the CSS in the entry file or global configuration. In React and Next.js, import it from the framework-approved entrypoint. In Angular, add it to styles or styles.scss. In Svelte and SvelteKit, import it from the root layout or a component.

For a distributed package, expose a TypeScript manifest to improve autocomplete and reduce naming mistakes.

Apply accessibility according to meaning

Decorative icons should use aria-hidden="true". If an icon is the only label for a button, the button needs an aria-label or visually hidden text. Do not use color alone to communicate success, error or warning.

  • Icon-only button: provide an accessible name.
  • Icon next to equivalent text: hide the icon from assistive technology.
  • Informative standalone icon: use role="img" and aria-label.
  • Maintain adequate contrast and touch target size.

Avoid oversized libraries

Loading a font with thousands of glyphs to use five icons increases initial cost and may block rendering. Individually imported SVGs or a generated package containing only the used assets is usually more efficient.

Review the library periodically and remove assets that no longer appear in the product.

Frequently asked questions