Home

Awesome

Font Awesome Compose

FontAwesoneConmpose is collection of ready to use Font Awesome free icons for Jetpack Compose.

Demo Icon usage

FontAwesomeExampleComposeCookBook BottombarComposeCookbook Login Demo

Chekout ComposeCookBook for more demo and usage.

Download

Add in project build.gradle:

repositories {
  maven { url 'https://jitpack.io' }
}

// App build.gradle
dependencies {
  implementation 'com.github.Gurupreet:FontAwesomeCompose:1.0.0'
}

Icon Types

There are mainly 3 types of icons available as below. By default all icons are solid (1000+ Icons) or Brands(450+ Icons). Those which also support Regular(150+ Icons) will end with "Regular" as suffix.

Usage

FaIcon composable is responsible for rendering icons. It requires icon passed to it from FaIcons collection.

 FaIcon(faIcon = FaIcons.ChartBarRegular)
 FaIcon(faIcon = FaIcons.ChartBar)
 FaIcon(faIcon = FaIcons.Amazon)

It has 3 params with default value as shown below

fun FaIcon(
    faIcon: FaIconType,
    modifier: Modifier = Modifier,
    size: Dp = 24.dp,
    tint: Color = Color.Unspecified
)

To use different sizes

FaIcon(faIcon = FaIcons.Airbnb, size = 24.dp)
FaIcon(faIcon = FaIcons.Airbnb, size = 32.dp)
FaIcon(faIcon = FaIcons.Airbnb, size = 48.dp)

To provide different colors

Disclaimer: It does not uses Material theme LocalColors by default to support different custom design system. So you have to pass your colors.

FaIcon(faIcon = FaIcons.Airbnb, tint = MaterialTheme.colors.primary)
FaIcon(faIcon = FaIcons.Airbnb, tint = LocalContentColor.current)
FaIcon(faIcon = FaIcons.Airbnb, tint = Color.Blue)

To provide layout positioning, padding, gestures etc pass Modifier

FaIcon(
    faIcon = FaIcons.Amazon,
    modifier = Modifier.semantics { testTag = "Amazon Icon" }
)
FaIcon(
    faIcon = FaIcons.Amazon,
    modifier = Modifier
        .background(Color.Green, shape = CircleShape)
        .padding(8.dp)
)

// Usage with icon button for already available backgroud and clickable functionality. 
IconButton(onClick = { }, modifier = Modifier.background(MaterialTheme.colors.primary, shape = CircleShape)) {
    FaIcon(faIcon = FaIcons.Airbnb, tint = MaterialTheme.colors.onPrimary)
}

Using with TopAppBar or BottomBar in MaterialTheme

TopAppBar(
    title = { Text(text = "Instagram") },
    navigationIcon = { FaIcon(faIcon = FaIcons.Instagram, tint = LocalContentColor.current) },
    actions = {
        IconButton(onClick = { }) {
            FaIcon(faIcon = FaIcons.HeartRegular, tint = LocalContentColor.current)
        }
        IconButton(onClick = { }) {
            FaIcon(faIcon = FaIcons.FacebookMessenger, tint = LocalContentColor.current)
        }
    }
)

BottomNavigationItem(
    icon = { FaIcon(faIcon = FaIcons.Home, tint = LocalContentColor.current.copy(alpha = LocalContentAlpha.current))},
    selected = true,
    onClick = {},
)

Library Info