@marioschmidt/design-system-icons

BILD Design System | Optimized SVG icons

Installation

npm install @marioschmidt/design-system-icons

Usage

ES Module Import

import addIcon from '@marioschmidt/design-system-icons/add.svg';
import menuIcon from '@marioschmidt/design-system-icons/menu.svg';

HTML

<img src="node_modules/@marioschmidt/design-system-icons/add.svg" alt="Add" />

CSS

.icon-add {
  background-image: url('@marioschmidt/design-system-icons/add.svg');
}

Vite / Webpack

Most bundlers support SVG imports out of the box:

import addIcon from '@marioschmidt/design-system-icons/add.svg';

// Use as image source
document.querySelector('img').src = addIcon;

Optimization

All SVGs are optimized with SVGO:

• currentColor: Fills/strokes use currentColor for CSS theming
• Preserved viewBox: Icons scale correctly at any size
• Prefixed IDs: Internal IDs (clipPath, gradients) are prefixed with icon name to prevent DOM collisions

<!-- Before optimization -->
<clipPath id="a">...</clipPath>

<!-- After optimization -->
<clipPath id="podcast-spotify-clip0_17587_6927">...</clipPath>

This ensures multiple icons can be rendered on the same page without conflicts.

Theming

All icons use currentColor for fills and strokes, allowing easy color customization via CSS:

.icon-container {
  color: var(--icon-color, #333);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .icon-container {
    color: #fff;
  }
}

Icon List

See the full icon catalog in the main icons documentation.

Related Packages

| Package | Purpose | |---------|---------| | @marioschmidt/design-system-icons-react | React components with TypeScript | | de.bild.design:icons | Android Vector Drawables | | BildIcons | iOS Swift Package |

License

MIT