---
type: "Components"
category: "Core"
parent: "Icon"
title: "Content"
date: "2030-10-10"
---

## Variant

Use **Tailwind CSS** to assign variant (e.g. [text-color](https://tailwindcss.com/docs/text-color), [opacity](https://tailwindcss.com/docs/opacity)).

> To **have parent text color** the Svg needs `stroke="currentColor"` or `fill="currentColor"` depending on svg format.

<demo>
  <demoinline src="demos/components/icon/variant">
  </demoinline>
</demo>

Use **Tailwind CSS** to assign styles (e.g. [text-color](https://tailwindcss.com/docs/text-color), [text-opacity](https://tailwindcss.com/docs/text-opacity)).

Text styles on **parent elements** are applied when **inerithed**.

<demo>
  <demoinline src="demos/components/icon/variant-inverse">
  </demoinline>
</demo>

## Size

Change [font-size](https://tailwindcss.com/docs/font-size) to change the icon size. Or use **Tailwind CSS** to assign size (e.g. [width](https://tailwindcss.com/docs/width), [height](https://tailwindcss.com/docs/height), [stroke-width](https://tailwindcss.com/docs/stroke-width)).

<demo>
  <demoinline src="demos/components/icon/size">
  </demoinline>
</demo>

## Button and Alignment

Refer to [button alignment and icon](/components/button/content#alignment-and-icon).
