Carbon Design System SVG icons packaged as Svelte components for use in Svelte applications.
carbon-icons-svelte is a zero-dependency library that provides the complete set of Carbon Design System SVG icons as reusable Svelte components. It enables developers to integrate consistent, accessible IBM design system icons into Svelte projects with full TypeScript support. The library can be used standalone or alongside the broader carbon-components-svelte library.
Svelte developers building applications that require consistent, accessible icons aligned with the IBM Carbon Design System, particularly those working on enterprise or design system-focused projects.
Developers choose this library for its direct integration of Carbon icons into Svelte's component model, offering optimized bundle impact through individual icon imports and full SVG control. It uniquely provides a framework-specific implementation that maintains strict Carbon Design System specifications while leveraging Svelte for performance and developer experience.
Carbon Design System SVG icons as Svelte components
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Allows importing individual icons as Svelte components from the lib folder, minimizing bundle size by including only what's used, as shown in the usage examples.
Includes built-in ARIA label and labelledby props for screen reader compatibility, ensuring icons are accessible out of the box without extra work.
Maintains strict adherence to Carbon specifications with standard sizes (16, 20, 24, 32px) and design consistency, ideal for enterprise projects following IBM's guidelines.
Offers full TypeScript support with CarbonIconProps type definitions for both Svelte 4 and Svelte 5, enhancing developer experience and type safety.
Without the carbon-preprocess-svelte preprocessor, barrel file imports can significantly slow down development times, as acknowledged in the README's tip section.
Exclusively tied to the Carbon Design System icon set, lacking flexibility for projects that need icons from other libraries or custom designs.
To achieve fast development imports, an external preprocessor (carbon-preprocess-svelte) must be configured, adding complexity to the setup process.