Getting Started
Choosing a Package
Learn how to choose between a standard Solar Icons package and its performance-oriented version.
Solar Icons packages are sometimes available in two variants:
- Standard package — maximizes flexibility and ease of use.
- Performance package (suffix
-perf) — optimized for minimal bundle size.
The best choice depends on your priorities: flexibility vs performance.
General Comparison
| Feature | Standard Package | Performance Package (-perf) |
|---|---|---|
| Dynamic Styles | ✅ Yes | ❌ No |
| Bundle Size | Larger | ✅ Smaller |
| Global Configuration | ✅ Yes (if supported) | ❌ No |
| Ease of Use | ✅ High | Good |
| Primary Use Case | Versatility & Development | Performance-critical apps |
How it works
Standard packages include all six icon styles within each component.
This makes them ideal for:
- Prototyping or applications where styles may change dynamically.
- Projects that value ease of use over bundle size.
- Global styling via a provider (when available).
Performance packages include only a single icon style per component.
This is perfect for:
- Applications where bundle size is critical.
- Situations where you know the exact style you need in advance.
- Environments without global configuration needs.
Example: React
For React, the two packages are:
@solar-icons/react
The versatile choice — all styles available in each icon, with global configuration support.
@solar-icons/react-perf
The performance choice — each icon includes only one style, drastically reducing bundle size.
Learn more about @solar-icons/react →
Learn more about @solar-icons/react-perf →
How is this guide?