Styling & Customization

Customize icon appearance using CSS, inputs, and utility classes.

Color via currentColor

Solar Icons SVGs use currentColor for fill and stroke values. This means icons automatically inherit the text color of their parent element.

html

<!-- Icons inherit the parent's text color -->
<div class="text-red-500">
  <solar-icon name="heart" iconStyle="bold" size="24" />
</div>

<!-- Or apply color directly -->
<solar-icon name="heart" iconStyle="bold" class="text-red-500" size="24" />
<solar-icon name="star" iconStyle="outline" class="text-amber-400" size="24" />

Sizing

Control icon dimensions using the size input for uniform dimensions, or width and height for independent control.

html

<!-- Uniform size (sets both width and height) -->
<solar-icon name="heart" iconStyle="bold" size="16" />
<solar-icon name="heart" iconStyle="bold" size="24" />
<solar-icon name="heart" iconStyle="bold" size="48" />

<!-- Independent width and height -->
<solar-icon name="heart" iconStyle="bold" width="32" height="24" />

CSS Custom Properties

Since the component uses ViewEncapsulation.None, you can target the rendered SVG directly with CSS classes or custom properties.

css

/* Target the solar-icon host element */
solar-icon {
  display: inline-flex;
  align-items: center;
}

/* Style the rendered SVG */
solar-icon svg {
  transition: color 0.2s ease;
}

/* Custom class for icon buttons */
.icon-button solar-icon {
  color: var(--icon-color, #a1a1aa);
}

.icon-button:hover solar-icon {
  color: var(--icon-hover-color, #fbbf24);
}

Tailwind CSS Integration

Apply Tailwind utility classes directly to the <solar-icon> element for rapid styling.

html

<!-- Color utilities -->
<solar-icon name="heart" iconStyle="bold" class="text-amber-500" size="24" />
<solar-icon name="star" iconStyle="outline" class="text-zinc-400 hover:text-amber-400 transition-colors" size="24" />

<!-- Inline flex alignment -->
<button class="inline-flex items-center gap-2 text-zinc-300">
  <solar-icon name="heart" iconStyle="bold" class="text-red-500" size="20" />
  Like
</button>

<!-- Responsive color -->
<solar-icon name="sun" iconStyle="bold" class="text-zinc-400 dark:text-amber-400" size="24" />

Because icons inherit currentColor, Tailwind text color utilities work out of the box. For sizing, prefer the component size input over Tailwind width/height classes for predictable SVG scaling.