Icon

An icon is a graphic symbol that represents an object (ie a file) or a function. They can be used to give the user feedback.

Icon Default

card-default


PBIcon.fontAwesome(.user, size: .x1)

Icon Rotate

icon-rotate


HStack(spacing: Spacing.xSmall) {
  PBIcon(FontAwesome.user, rotation: .right)
  PBIcon(FontAwesome.user, rotation: .zero)
  PBIcon(FontAwesome.user, rotation: .obtuse) 
}

Icon Flip

icon-flipped


 HStack(spacing: Spacing.xSmall) {
  PBIcon(FontAwesome.questionCircle, flipped: [.horizontal])
  PBIcon(FontAwesome.questionCircle, flipped: [.vertical])
  PBIcon(FontAwesome.questionCircle, flipped: [.horizontal, .vertical])
}

Icon Border

card-border


PBIcon(FontAwesome.user, border: true)

Icon Sizes

icon-size


HStack(spacing: Spacing.xSmall) {
  PBIcon.fontAwesome(.atlas, size: .xSmall)
  Text("xSmall")

  PBIcon.fontAwesome(.atlas, size: .small)
  Text("small")

  PBIcon.fontAwesome(.atlas, size: .large)
  Text("large")

  PBIcon.fontAwesome(.atlas, size: .x1)
  Text("x1")

  PBIcon.fontAwesome(.atlas, size: .x2)
  Text("x2")

  PBIcon.fontAwesome(.atlas, size: .x3)
  Text("x3")

  PBIcon.fontAwesome(.atlas, size: .x4)
  Text("x4")

  PBIcon.fontAwesome(.atlas, size: .x5)
  Text("x5")

  PBIcon.fontAwesome(.atlas, size: .x6)
  Text("x6")

  PBIcon.fontAwesome(.atlas, size: .x7)
  Text("x7")

  PBIcon.fontAwesome(.atlas, size: .x8)
  Text("x8")

  PBIcon.fontAwesome(.atlas, size: .x9)
  Text("x9")

  PBIcon.fontAwesome(.atlas, size: .x10)
  Text("x10")
}

Props

Props

Name Type Description Default Values
Icon PlaybookGenericIcon Sets the kit's Icon
Size IconSize Changes the size of the Icon .x1 xSmall small large x1 x2 x3 x4 x5 x6 x7 x8 x9 x10
Rotation IconRotation Rotates the Icon .zero .zero .right .straight .obtuse
Border Bool Adds a border false true false
Flipped [Axis] Flips the Icon nil [.horizontal] [.vertical] [.horizontal, .vertical]

UI Samples using Icon Kit

Get the full picture. See how this kit is used in our samples.