Icon Monks
Guides
Color and size

How to change icon color and size

Every Icon Monks icon draws in currentColor, so by default it takes the text color and scales as a vector. To set them yourself, use the size and color props in React, Vue and the web component, CSS for fonts and inline SVG, and the platform's own icon APIs on Flutter, SwiftUI and Android.

Quick reference

Platform	Size	Color
React	`size={32}`	`color="crimson"`
Vue	`:size="32"`	`color="crimson"`
Web component	`size="32"`	`color="crimson"`
Icon font	`font-size: 32px`	`color: crimson`
Inline SVG	`width` / `height`	CSS `color` (currentColor)
Flutter	`size: 32`	`color: Colors.red`
SwiftUI	`size: 32`	`.foregroundStyle(.red)`
Jetpack Compose	`Modifier.size(32.dp)`	`tint = Color.Red`

React and Vue

// React
<Heart size={32} color="crimson" weight="fill" />

<!-- Vue -->
<Heart :size="32" color="crimson" weight="fill" />

Leave out color to inherit the text color. Set defaults for a whole tree with IconContext in React or provide(IconContextKey, …) in Vue.

Web component, icon font and SVG

<icon-monks name="heart" size="32" color="crimson"></icon-monks>

<i class="im im-heart" style="font-size: 32px; color: crimson"></i>

<svg width="32" height="32" style="color: crimson"> … </svg>

Icon fonts and inline SVGs behave like text: change font-size or width and color in CSS, including on :hover.

Flutter

Icon(IconMonks.heart, size: 32, color: Colors.red)

// or for a whole subtree
IconTheme(data: IconThemeData(size: 24, color: Colors.indigo), child: …)

SwiftUI and UIKit

IconMonkImage(.heart, weight: .fill, size: 32)   // scales with Dynamic Type
    .foregroundStyle(.red)

let image = IconMonk.heart.uiImage(.bold)          // UIKit, tint with tintColor

Jetpack Compose

Icon(
    IconMonks.Fill.Heart,
    contentDescription = "Favorite",
    tint = Color.Red,
    modifier = Modifier.size(32.dp),
)

Frequently asked questions

Why does my icon have the wrong color?

Icons use currentColor, so they inherit the color of their parent. Set color on the icon itself, or on the element around it.

Can I use a gradient?

Yes, with inline SVG: define a linearGradient and set the path fill to it. Fonts and the native packages support a single color.

What size should icons be?

Most interfaces use 20 to 24 px. Use the bold weight at 16 px and below so lines stay readable, and thin or light at 48 px and above.

More guides

Written by Atiqur Rahaman, Founder & CEO, Design Monks & Dev Monks at Design Monks. About Icon Monks

Last updated 3 November 2026 with version 0.4.3. Release notes