How to Add Custom Fonts and Icons in Jetpack Compose ?

Follow @desiprogrammer_

Table Of Contents

Adding Fonts

Adding Icon

Adding Fonts

First download a font that you like, I will choose this free font. Create a font directory in the res folder and add the needed fonts in that. Remember to rename them as only a-z and 0-9 and _ are accepted.

Then navigate to app/java/com/example/appname/ui/theme/Type.kt and add your own font above the Typography.

NOTE : To add font from resources, import R class in this method

**import com.example.testapp.R;**. 

Initializing your Font.

 val Lato = FontFamily(
        Font(R.font.lato_bold, FontWeight.Bold)

Now you can use this font wherever you want as

 fontFamily = Lato,

you can also change the entire app typography to make this your default font.

 val Typography = Typography(
         body1 = TextStyle(
                 fontFamily = Lato,
                 fontWeight = FontWeight.Normal,
                 fontSize = 18.sp

Adding Icons

First you need to find any compose supported Icon pack. Here are a few. Font Awesome Compose and Compose Icons

I will continue with the fontawesomecompose and as it is suggested, we will add the following in dependencies.

// Project/build.gradle
repositories {
  maven { url '' }

// App build.gradle
dependencies {
  implementation 'com.github.Gurupreet:FontAwesomeCompose:1.0.1-alpha01'

and then we can use the Icons as follows

 FaIcon(faIcon = FaIcons.Amazon)


Getting started with Jetpack Compose

Language Icon

Hello World in Jetpack Compose from Scratch

Language Icon