Biofarma | Bind UI

Iconography

Icons can be used in components that require information in the form of icons.

Type	Resource
Design	Figma
Mobile	Mobile Storybook
Code	Gitlab

Usage

import id.co.biofarma.bindicon.components.BindIcon
import id.co.biofarma.bindicon.icons.BindIcons

BindIcon(
    icon = BindIcons,
    contentDescription = name,
    size = 40.dp,
    tint = iconColor
)

Examples

Custom

Use type custom icon outline or filled to use a custom icon.

Iconography Example Custom

BindIcon( icon =
BindIcons.Hospital.Lined.Cross001, contentDescription = name, size =
40.dp, tint = ColorModes.Light.IconNeutral.Default ) BindIcon( icon =
BindIcons.Hospital.Lined.Stethoscope002, contentDescription = name, size
= 40.dp, tint = ColorModes.Light.IconNeutral.Default ) BindIcon( icon =
BindIcons.Hospital.Lined.Pill006, contentDescription = name, size =
40.dp, tint = ColorModes.Light.IconNeutral.Default ) BindIcon( icon =
BindIcons.Hospital.Lined.Hospital009, contentDescription = name, size =
40.dp, tint = ColorModes.Light.IconNeutral.Default ) BindIcon( icon =
BindIcons.Hospital.Lined.Tablet005, contentDescription = name, size =
40.dp, tint = ColorModes.Light.IconNeutral.Default ) BindIcon( icon =
BindIcons.Hospital.Lined.Cross001, contentDescription = name, size =
40.dp, tint = ColorModes.Light.IconPrimary.Strong ) BindIcon( icon =
BindIcons.Hospital.Lined.Stethoscope002, contentDescription = name, size
= 40.dp, tint = ColorModes.Light.IconPrimary.Strong ) BindIcon( icon =
BindIcons.Hospital.Lined.Pill006, contentDescription = name, size =
40.dp, tint = ColorModes.Light.IconPrimary.Strong ) BindIcon( icon =
BindIcons.Hospital.Lined.Hospital009, contentDescription = name, size =
40.dp, tint = ColorModes.Light.IconPrimary.Strong ) BindIcon( icon =
BindIcons.Hospital.Lined.Tablet005, contentDescription = name, size =
40.dp, tint = ColorModes.Light.IconPrimary.Strong ) BindIcon( icon =
BindIcons.Hospital.Filled.Cross001, contentDescription = name, size =
40.dp, tint = ColorModes.Light.IconNeutral.Default ) BindIcon( icon =
BindIcons.Hospital.Filled.Stethoscope002, contentDescription = name,
size = 40.dp, tint = ColorModes.Light.IconNeutral.Default ) BindIcon(
icon = BindIcons.Hospital.Filled.Pill006, contentDescription = name,
size = 40.dp, tint = ColorModes.Light.IconNeutral.Default ) BindIcon(
icon = BindIcons.Hospital.Filled.Hospital009, contentDescription = name,
size = 40.dp, tint = ColorModes.Light.IconNeutral.Default ) BindIcon(
icon = BindIcons.Hospital.Filled.Tablet005, contentDescription = name,
size = 40.dp, tint = ColorModes.Light.IconNeutral.Default ) BindIcon(
icon = BindIcons.Hospital.Filled.Cross001, contentDescription = name,
size = 40.dp, tint = ColorModes.Light.IconPrimary.Strong ) BindIcon(
icon = BindIcons.Hospital.Filled.Stethoscope002, contentDescription =
name, size = 40.dp, tint = ColorModes.Light.IconPrimary.Strong )
BindIcon( icon = BindIcons.Hospital.Filled.Pill006,
contentDescription = name, size = 40.dp, tint =
ColorModes.Light.IconPrimary.Strong ) BindIcon( icon =
BindIcons.Hospital.Filled.Hospital009, contentDescription = name, size =
40.dp, tint = ColorModes.Light.IconPrimary.Strong ) BindIcon( icon =
BindIcons.Hospital.Filled.Tablet005, contentDescription = name, size =
40.dp, tint = ColorModes.Light.IconPrimary.Strong )

Icon Park

Use type icon park icon outline or filled to use a icon park icon.

Iconography Example Custom

  BindIcon(
    icon = BindIcons.Base.Lined.MailEdit,
    contentDescription = name,
    size = 40.dp,
    tint = ColorModes.Light.IconNeutral.Default
  )
  BindIcon(
    icon = BindIcons.Base.Lined.MailOpen,
    contentDescription = name,
    size = 40.dp,
    tint = ColorModes.Light.IconNeutral.Default
  )
  BindIcon(
    icon = BindIcons.Base.Lined.MailReview,
    contentDescription = name,
    size = 40.dp,
    tint = ColorModes.Light.IconNeutral.Default
  )
  BindIcon(
    icon = BindIcons.Base.Lined.Lightning,
    contentDescription = name,
    size = 40.dp,
    tint = ColorModes.Light.IconNeutral.Default
  )
  BindIcon(
    icon = BindIcons.Base.Lined.Like,
    contentDescription = name,
    size = 40.dp,
    tint = ColorModes.Light.IconNeutral.Default
  )
  BindIcon(
    icon = BindIcons.Base.Lined.MailEdit,
    contentDescription = name,
    size = 40.dp,
    tint = ColorModes.Light.IconPrimary.Strong
  )
  BindIcon(
    icon = BindIcons.Base.Lined.MailOpen,
    contentDescription = name,
    size = 40.dp,
    tint = ColorModes.Light.IconPrimary.Strong
  )
  BindIcon(
    icon = BindIcons.Base.Lined.MailReview,
    contentDescription = name,
    size = 40.dp,
    tint = ColorModes.Light.IconPrimary.Strong
  )
  BindIcon(
    icon = BindIcons.Base.Lined.Lightning,
    contentDescription = name,
    size = 40.dp,
    tint = ColorModes.Light.IconPrimary.Strong
  )
  BindIcon(
    icon = BindIcons.Base.Lined.Like,
    contentDescription = name,
    size = 40.dp,
    tint = ColorModes.Light.IconPrimary.Strong
  )
  BindIcon(
    icon = BindIcons.Base.Filled.MailEdit,
    contentDescription = name,
    size = 40.dp,
    tint = ColorModes.Light.IconNeutral.Default
  )
  BindIcon(
    icon = BindIcons.Base.Filled.MailOpen,
    contentDescription = name,
    size = 40.dp,
    tint = ColorModes.Light.IconNeutral.Default
  )
  BindIcon(
    icon = BindIcons.Base.Filled.MailReview,
    contentDescription = name,
    size = 40.dp,
    tint = ColorModes.Light.IconNeutral.Default
  )
  BindIcon(
    icon = BindIcons.Base.Filled.Lightning,
    contentDescription = name,
    size = 40.dp,
    tint = ColorModes.Light.IconNeutral.Default
  )
  BindIcon(
    icon = BindIcons.Base.Filled.Like,
    contentDescription = name,
    size = 40.dp,
    tint = ColorModes.Light.IconNeutral.Default
  )
  BindIcon(
    icon = BindIcons.Base.Filled.MailEdit,
    contentDescription = name,
    size = 40.dp,
    tint = ColorModes.Light.IconPrimary.Strong
  )
  BindIcon(
    icon = BindIcons.Base.Filled.MailOpen,
    contentDescription = name,
    size = 40.dp,
    tint = ColorModes.Light.IconPrimary.Strong
  )
  BindIcon(
    icon = BindIcons.Base.Filled.MailReview,
    contentDescription = name,
    size = 40.dp,
    tint = ColorModes.Light.IconPrimary.Strong
  )
  BindIcon(
    icon = BindIcons.Base.Filled.Lightning,
    contentDescription = name,
    size = 40.dp,
    tint = ColorModes.Light.IconPrimary.Strong
  )
  BindIcon(
    icon = BindIcons.Base.Filled.Like,
    contentDescription = name,
    size = 40.dp,
    tint = ColorModes.Light.IconPrimary.Strong
  )

Props

Props	Required	Default	Type	description
type	false	`iconpark`	`iconpark`, `custom`	The icon type option to use.
custom_category	false	`HealthCare`	`HealthCare`, `Hospital`, `HumanBody`, `HumanMind`, `MedicalService`, `MedicalService`, `Medicine`	Category list for custom icon categories.
iconpark_category	false	`Base`	`Abstract`, `Arrows`, `Base`, `Books`, `Brand`, `Build`, `Character`, `Charts`, `Child`, `Clothes`, `Communicate`, `Connect`, `Datas`, `Edit`, `Emoji`, `Foods`, `Graphics`, `Hands`, `Hardware`, `Health`, `Industry`, `Life`, `Makeups`, `Money`, `Music`, `Office`, `Operate`, `Others`, `Peoples`, `Sports`, `Time`, `Travel`, `Wearher`	Category list for icon park icon categories.
color	false	`Neutral_Default`	`Neutral_Default`, `Neutral_Soft`, `Neutral_Disabled`, `Neutral_Inverse`, `Neutral_Muted`, `Primary_Strong`, `Primary_Weak`, `Primary_BrandLogo`, `Secondary_Strong`, `Secondary_Weak`	List of color options for all icons.

Pie Chart Accordion