Using SFSymbols in Jetpack Compose

Motivation

When working with startups that primarily target USA customers it's very common to first develop an iOS app and then later create an Android clone.

Sometimes, you are faced with a challenge:

→ Develop an Android app with iOS design and backend developed with that in mind.

Almost every iOS app on the market relies on SF Symbols, Apple's default icon pack similar to Google Material icons or Font Awesome icons.

I will show a very elegant way to handle SF Symbols using Jetpack Compose.

Let's begin!

1. Convert SF Symbols to drawables

Since Apple will not provide you with the icons you need to use SF Symbols on other platforms, you have to look elsewhere.

I've stumbled upon this public Figma file with almost every SF Symbol you will ever need.

Find the symbols you need, and export them as an SVG.

Use the SVG to create a vector asset using Android Studio.

2. Create a custom Painter

SF Symbols are usually resolved from strings in iOS, so we will do the same. Create SFSymbolUtil with a method that returns an appropriate drawable.

private object SFSymbolUtil {
    fun getDrawableFor(symbolName: String): Int? {
        return when (symbolName) {
            "party.popper.fill" -> R.drawable.ic_party_popper_fill_colored
            "checkmark.rectangle.fill" -> R.drawable.ic_checkmark_rectangle_fill
            "figure.run.square.stack.fill" -> R.drawable.ic_figure_run_square_stack_fill_colored
            else -> {
                Timber.e("Could resolve SFSymbol: $symbolName")
                null
            }
        }
    }
}

Now we can use that util to create a custom painter for SF Symbols.

@Composable
fun painterSFSymbol(sfSymbolName: String): Painter {
    SFSymbolUtil.getDrawableFor(symbolName = sfSymbolName)?.let {
        return painterResource(id = it)
    }
    return painterResource(id = R.drawable.ic_empty)
}

If the painter receives an SF Symbol for which we don't have a drawable, we can use an empty drawable to draw nothing on the screen.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="1dp"
    android:height="1dp"
    android:viewportWidth="1"
    android:viewportHeight="1">

    <path
        android:pathData="M0,0Z"
        android:fillColor="#ffffff"/>

</vector>

That's it, you can now easily use this Painter with your Image composable.

    Image(
        painter = painterSFSymbol(sfSymbolName = "checkmark.rectangle.fill")),
        contentDescription = null,
        modifier = Modifier.size(100.dp),
        contentScale = ContentScale.Fit,
    )

If you have enjoyed or found this helpful, make sure to follow me for more content like this!

Read this on my website.