Skip to content
Esc
↑↓navigate↵open⌘Jpreview
On this page

Jetpack Compose

Use free, open-source Vadivam icons in Jetpack Compose as ImageVectors and in Android Views as vector drawables.

com.praveenjuge:vadivam-compose on Maven Central has every icon as a Compose ImageVector and as an Android vector drawable. It needs Android API 23 or newer.

dependencies {
    implementation("com.praveenjuge:vadivam-compose:<version>")
}

Use the version from the latest release.

Basic usage

Icons are extension properties on VadivamIcons. Import each one you use:

import com.praveenjuge.vadivam.VadivamIcons
import com.praveenjuge.vadivam.icons.Activity

Icon(VadivamIcons.Activity, contentDescription = null)

Icon(
    imageVector = VadivamIcons.Activity,
    contentDescription = "Activity",
    modifier = Modifier.size(20.dp),
    tint = Color(0xFF3F51B5),
)

Icon from Material tints the stroke with the current content color. Each ImageVector is built on first use and then cached.

Stroke width

Icons draw with a stroke width of 2 view-box units. Use withStrokeWidth for a different weight, and wrap it in remember inside composables:

import com.praveenjuge.vadivam.withStrokeWidth

val thin = remember { VadivamIcons.Activity.withStrokeWidth(1.5f) }
Icon(thin, contentDescription = null)

// Keep the stroke 2 dp wide when the icon is drawn at 48 dp.
val bold = remember { VadivamIcons.Activity.withStrokeWidth(2f, absoluteSize = 48.dp) }
Icon(bold, contentDescription = null, modifier = Modifier.size(48.dp))

Android Views

Every icon is also a vector drawable named vadivam_ plus the icon name with underscores, tinted with colorControlNormal like Material icons:

<ImageView
    android:layout_width="24dp"
    android:layout_height="24dp"
    android:src="@drawable/vadivam_arrow_right"
    android:contentDescription="@null" />

The same drawables are attached to each GitHub release as a zip for projects that don’t use Gradle dependencies.

Runtime names

import com.praveenjuge.vadivam.icons.byName

VadivamIcons.byName("arrow-right")?.let { Icon(it, contentDescription = null) }

R8 removes icons and drawables your app doesn’t use. Calling byName keeps every icon in the app, so prefer the named properties when the icon is known. VadivamIcons.names lists every name.

Accessibility

Pass contentDescription = null for decorative icons, and a short description for icons that carry meaning on their own. See Accessibility.

Last updated on

Was this page helpful?