Data Display
Badges with Icons

Added Jul 7, 2026
18 badge variants across all four styles (Default, Secondary, Destructive, Outline), each paired with a Power Apps Classic icon on the left or right. Covers the most common real-world badge use cases: Verified, Saved, Featured, Alert, Beta, Pending, New, Active, Critical, Pro, Draft, Rejected, Approved, Review, Info, Locked, Expired, Shared.
VerifiedSavedFeaturedAlertBetaPendingNewActiveCriticalProDraftRejectedApprovedReviewInfoLockedExpiredShared
CopySnips Live Preview
How to Use

Paste the YAML into Power Apps Studio (Ctrl+V). Six GroupContainers are added, each containing an Icon and a Label.
Delete any badge variants you do not need.
To change an icon, update the Icon property of any icoXxx control (e.g. =Icon.Star → =Icon.Heart).
To move the icon to the other side, change its X position and adjust the Label's X and Width accordingly.
Resize each container's Width if your custom text is longer or shorter.
Problem Solved

Provides six ready-styled pill badges with built-in Power Apps icons, matching the shadcn/ui Badge with icon pattern across all four official variants.
Integration

Each badge is a self-contained GroupContainer. Bind any Label's Text property to a variable or expression. Change Icon values to any member of the Icon enum to customise the glyph.
- grpBadgeVerified:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      Fill: =RGBA(241, 245, 249, 1)
      BorderThickness: =0
      DropShadow: =DropShadow.None
      Height: =24
      RadiusBottomLeft: =12
      RadiusBottomRight: =12
      RadiusTopLeft: =12
      RadiusTopRight: =12
      Width: =90
      X: =20
      Y: =20
    Children:
      - icoVerified:
          Control: Classic/Icon@2.4.0
          Properties:
            Color: =RGBA(15, 23, 42, 1)
            Icon: =Icon.Check
            Height: =12
            Width: =12
            X: =8
            Y: =6
      - lblVerified:
          Control: Label@2.5.1
          Properties:
            Align: =Align.Left
            VerticalAlign: =VerticalAlign.Middle
            Color: =RGBA(15, 23, 42, 1)
            Fill: =RGBA(0, 0, 0, 0)
            Font: =Font.'Open Sans'
            FontWeight: =FontWeight.Semibold
            Height: =24
            Size: =9
            Text: =""
            Width: =58
            X: =24
            Y: =0
- grpBadgeSaved:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      Fill: =RGBA(0, 0, 0, 0)
      BorderColor: =RGBA(226, 232, 240, 1)
      BorderThickness: =1
      DropShadow: =DropShadow.None
      Height: =24
      RadiusBottomLeft: =12
      RadiusBottomRight: =12
      RadiusTopLeft: =12
      RadiusTopRight: =12
      Width: =94
      X: =118
      Y: =20
    Children:
      - lblSaved:
          Control: Label@2.5.1
          Properties:
            Align: =Align.Left
            VerticalAlign: =VerticalAlign.Middle
            Color: =RGBA(15, 23, 42, 1)
            Fill: =RGBA(0, 0, 0, 0)
            Font: =Font.'Open Sans'
            FontWeight: =FontWeight.Semibold
            Height: =24
            Size: =9
            Text: =""
            Width: =60
            X: =10
            Y: =0
      - icoSaved:
          Control: Classic/Icon@2.4.0
          Properties:
            Color: =RGBA(15, 23, 42, 1)
            Icon: =Icon.Bookmark
            Height: =12
            Width: =12
            X: =74
            Y: =6
- grpBadgeFeatured:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      Fill: =RGBA(15, 23, 42, 1)
      BorderThickness: =0
      DropShadow: =DropShadow.None
      Height: =24
      RadiusBottomLeft: =12
      RadiusBottomRight: =12
      RadiusTopLeft: =12
      RadiusTopRight: =12
      Width: =100
      X: =220
      Y: =20
    Children:
      - icoFeatured:
          Control: Classic/Icon@2.4.0
          Properties:
            Color: =RGBA(248, 250, 252, 1)
            Icon: =Icon.Bell
            Height: =12
            Width: =12
            X: =8
            Y: =6
      - lblFeatured:
          Control: Label@2.5.1
          Properties:
            Align: =Align.Left
            VerticalAlign: =VerticalAlign.Middle
            Color: =RGBA(248, 250, 252, 1)
            Fill: =RGBA(0, 0, 0, 0)
            Font: =Font.'Open Sans'
            FontWeight: =FontWeight.Semibold
            Height: =24
            Size: =9
            Text: =""
            Width: =68
            X: =24
            Y: =0
- grpBadgeAlert:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      Fill: =RGBA(239, 68, 68, 1)
      BorderThickness: =0
      DropShadow: =DropShadow.None
      Height: =24
      RadiusBottomLeft: =12
      RadiusBottomRight: =12
      RadiusTopLeft: =12
      RadiusTopRight: =12
      Width: =74
      X: =20
      Y: =52
    Children:
      - icoAlert:
          Control: Classic/Icon@2.4.0
          Properties:
            Color: =RGBA(248, 250, 252, 1)
            Icon: =Icon.Warning
            Height: =12
            Width: =12
            X: =8
            Y: =6
      - lblAlert:
          Control: Label@2.5.1
          Properties:
            Align: =Align.Left
            VerticalAlign: =VerticalAlign.Middle
            Color: =RGBA(248, 250, 252, 1)
            Fill: =RGBA(0, 0, 0, 0)
            Font: =Font.'Open Sans'
            FontWeight: =FontWeight.Semibold
            Height: =24
            Size: =9
            Text: =""
            Width: =42
            X: =24
            Y: =0
- grpBadgeBeta:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      Fill: =RGBA(241, 245, 249, 1)
      BorderThickness: =0
      DropShadow: =DropShadow.None
      Height: =24
      RadiusBottomLeft: =12
      RadiusBottomRight: =12
      RadiusTopLeft: =12
      RadiusTopRight: =12
      Width: =70
      X: =102
      Y: =52
    Children:
      - icoBeta:
          Control: Classic/Icon@2.4.0
          Properties:
            Color: =RGBA(15, 23, 42, 1)
            Icon: =Icon.Tag
            Height: =12
            Width: =12
            X: =8
            Y: =6
      - lblBeta:
          Control: Label@2.5.1
          Properties:
            Align: =Align.Left
            VerticalAlign: =VerticalAlign.Middle
            Color: =RGBA(15, 23, 42, 1)
            Fill: =RGBA(0, 0, 0, 0)
            Font: =Font.'Open Sans'
            FontWeight: =FontWeight.Semibold
            Height: =24
            Size: =9
            Text: =""
            Width: =38
            X: =24
            Y: =0
- grpBadgePending:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      Fill: =RGBA(0, 0, 0, 0)
      BorderColor: =RGBA(226, 232, 240, 1)
      BorderThickness: =1
      DropShadow: =DropShadow.None
      Height: =24
      RadiusBottomLeft: =12
      RadiusBottomRight: =12
      RadiusTopLeft: =12
      RadiusTopRight: =12
      Width: =108
      X: =180
      Y: =52
    Children:
      - lblPending:
          Control: Label@2.5.1
          Properties:
            Align: =Align.Left
            VerticalAlign: =VerticalAlign.Middle
            Color: =RGBA(15, 23, 42, 1)
            Fill: =RGBA(0, 0, 0, 0)
            Font: =Font.'Open Sans'
            FontWeight: =FontWeight.Semibold
            Height: =24
            Size: =9
            Text: =""
            Width: =74
            X: =10
            Y: =0
      - icoPending:
          Control: Classic/Icon@2.4.0
          Properties:
            Color: =RGBA(15, 23, 42, 1)
            Icon: =Icon.Clock
            Height: =12
            Width: =12
            X: =88
            Y: =6
- grpBadgeNew:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      Fill: =RGBA(15, 23, 42, 1)
      BorderThickness: =0
      DropShadow: =DropShadow.None
      Height: =24
      RadiusBottomLeft: =12
      RadiusBottomRight: =12
      RadiusTopLeft: =12
      RadiusTopRight: =12
      Width: =80
      X: =20
      Y: =84
    Children:
      - icoNew:
          Control: Classic/Icon@2.4.0
          Properties:
            Color: =RGBA(248, 250, 252, 1)
            Icon: =Icon.Add
            Height: =12
            Width: =12
            X: =8
            Y: =6
      - lblNew:
          Control: Label@2.5.1
          Properties:
            Align: =Align.Left
            VerticalAlign: =VerticalAlign.Middle
            Color: =RGBA(248, 250, 252, 1)
            Fill: =RGBA(0, 0, 0, 0)
            Font: =Font.'Open Sans'
            FontWeight: =FontWeight.Semibold
            Height: =24
            Size: =9
            Text: =""
            Width: =48
            X: =24
            Y: =0
- grpBadgeActive:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      Fill: =RGBA(241, 245, 249, 1)
      BorderThickness: =0
      DropShadow: =DropShadow.None
      Height: =24
      RadiusBottomLeft: =12
      RadiusBottomRight: =12
      RadiusTopLeft: =12
      RadiusTopRight: =12
      Width: =80
      X: =108
      Y: =84
    Children:
      - icoActive:
          Control: Classic/Icon@2.4.0
          Properties:
            Color: =RGBA(15, 23, 42, 1)
            Icon: =Icon.People
            Height: =12
            Width: =12
            X: =8
            Y: =6
      - lblActive:
          Control: Label@2.5.1
          Properties:
            Align: =Align.Left
            VerticalAlign: =VerticalAlign.Middle
            Color: =RGBA(15, 23, 42, 1)
            Fill: =RGBA(0, 0, 0, 0)
            Font: =Font.'Open Sans'
            FontWeight: =FontWeight.Semibold
            Height: =24
            Size: =9
            Text: =""
            Width: =48
            X: =24
            Y: =0
- grpBadgeCritical:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      Fill: =RGBA(239, 68, 68, 1)
      BorderThickness: =0
      DropShadow: =DropShadow.None
      Height: =24
      RadiusBottomLeft: =12
      RadiusBottomRight: =12
      RadiusTopLeft: =12
      RadiusTopRight: =12
      Width: =88
      X: =196
      Y: =84
    Children:
      - icoCritical:
          Control: Classic/Icon@2.4.0
          Properties:
            Color: =RGBA(248, 250, 252, 1)
            Icon: =Icon.Warning
            Height: =12
            Width: =12
            X: =8
            Y: =6
      - lblCritical:
          Control: Label@2.5.1
          Properties:
            Align: =Align.Left
            VerticalAlign: =VerticalAlign.Middle
            Color: =RGBA(248, 250, 252, 1)
            Fill: =RGBA(0, 0, 0, 0)
            Font: =Font.'Open Sans'
            FontWeight: =FontWeight.Semibold
            Height: =24
            Size: =9
            Text: =""
            Width: =56
            X: =24
            Y: =0
- grpBadgePro:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      Fill: =RGBA(15, 23, 42, 1)
      BorderThickness: =0
      DropShadow: =DropShadow.None
      Height: =24
      RadiusBottomLeft: =12
      RadiusBottomRight: =12
      RadiusTopLeft: =12
      RadiusTopRight: =12
      Width: =64
      X: =20
      Y: =116
    Children:
      - icoPro:
          Control: Classic/Icon@2.4.0
          Properties:
            Color: =RGBA(248, 250, 252, 1)
            Icon: =Icon.Lock
            Height: =12
            Width: =12
            X: =8
            Y: =6
      - lblPro:
          Control: Label@2.5.1
          Properties:
            Align: =Align.Left
            VerticalAlign: =VerticalAlign.Middle
            Color: =RGBA(248, 250, 252, 1)
            Fill: =RGBA(0, 0, 0, 0)
            Font: =Font.'Open Sans'
            FontWeight: =FontWeight.Semibold
            Height: =24
            Size: =9
            Text: =""
            Width: =32
            X: =24
            Y: =0
- grpBadgeDraft:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      Fill: =RGBA(241, 245, 249, 1)
      BorderThickness: =0
      DropShadow: =DropShadow.None
      Height: =24
      RadiusBottomLeft: =12
      RadiusBottomRight: =12
      RadiusTopLeft: =12
      RadiusTopRight: =12
      Width: =76
      X: =92
      Y: =116
    Children:
      - icoDraft:
          Control: Classic/Icon@2.4.0
          Properties:
            Color: =RGBA(15, 23, 42, 1)
            Icon: =Icon.Edit
            Height: =12
            Width: =12
            X: =8
            Y: =6
      - lblDraft:
          Control: Label@2.5.1
          Properties:
            Align: =Align.Left
            VerticalAlign: =VerticalAlign.Middle
            Color: =RGBA(15, 23, 42, 1)
            Fill: =RGBA(0, 0, 0, 0)
            Font: =Font.'Open Sans'
            FontWeight: =FontWeight.Semibold
            Height: =24
            Size: =9
            Text: =""
            Width: =44
            X: =24
            Y: =0
- grpBadgeRejected:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      Fill: =RGBA(239, 68, 68, 1)
      BorderThickness: =0
      DropShadow: =DropShadow.None
      Height: =24
      RadiusBottomLeft: =12
      RadiusBottomRight: =12
      RadiusTopLeft: =12
      RadiusTopRight: =12
      Width: =92
      X: =176
      Y: =116
    Children:
      - icoRejected:
          Control: Classic/Icon@2.4.0
          Properties:
            Color: =RGBA(248, 250, 252, 1)
            Icon: =Icon.Cancel
            Height: =12
            Width: =12
            X: =8
            Y: =6
      - lblRejected:
          Control: Label@2.5.1
          Properties:
            Align: =Align.Left
            VerticalAlign: =VerticalAlign.Middle
            Color: =RGBA(248, 250, 252, 1)
            Fill: =RGBA(0, 0, 0, 0)
            Font: =Font.'Open Sans'
            FontWeight: =FontWeight.Semibold
            Height: =24
            Size: =9
            Text: =""
            Width: =60
            X: =24
            Y: =0
- grpBadgeApproved:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      Fill: =RGBA(241, 245, 249, 1)
      BorderThickness: =0
      DropShadow: =DropShadow.None
      Height: =24
      RadiusBottomLeft: =12
      RadiusBottomRight: =12
      RadiusTopLeft: =12
      RadiusTopRight: =12
      Width: =118
      X: =20
      Y: =148
    Children:
      - lblApproved:
          Control: Label@2.5.1
          Properties:
            Align: =Align.Left
            VerticalAlign: =VerticalAlign.Middle
            Color: =RGBA(15, 23, 42, 1)
            Fill: =RGBA(0, 0, 0, 0)
            Font: =Font.'Open Sans'
            FontWeight: =FontWeight.Semibold
            Height: =24
            Size: =9
            Text: =""
            Width: =84
            X: =10
            Y: =0
      - icoApproved:
          Control: Classic/Icon@2.4.0
          Properties:
            Color: =RGBA(15, 23, 42, 1)
            Icon: =Icon.Check
            Height: =12
            Width: =12
            X: =98
            Y: =6
- grpBadgeReview:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      Fill: =RGBA(0, 0, 0, 0)
      BorderColor: =RGBA(226, 232, 240, 1)
      BorderThickness: =1
      DropShadow: =DropShadow.None
      Height: =24
      RadiusBottomLeft: =12
      RadiusBottomRight: =12
      RadiusTopLeft: =12
      RadiusTopRight: =12
      Width: =84
      X: =146
      Y: =148
    Children:
      - icoReview:
          Control: Classic/Icon@2.4.0
          Properties:
            Color: =RGBA(15, 23, 42, 1)
            Icon: =Icon.Search
            Height: =12
            Width: =12
            X: =8
            Y: =6
      - lblReview:
          Control: Label@2.5.1
          Properties:
            Align: =Align.Left
            VerticalAlign: =VerticalAlign.Middle
            Color: =RGBA(15, 23, 42, 1)
            Fill: =RGBA(0, 0, 0, 0)
            Font: =Font.'Open Sans'
            FontWeight: =FontWeight.Semibold
            Height: =24
            Size: =9
            Text: =""
            Width: =52
            X: =24
            Y: =0
- grpBadgeInfo:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      Fill: =RGBA(15, 23, 42, 1)
      BorderThickness: =0
      DropShadow: =DropShadow.None
      Height: =24
      RadiusBottomLeft: =12
      RadiusBottomRight: =12
      RadiusTopLeft: =12
      RadiusTopRight: =12
      Width: =68
      X: =238
      Y: =148
    Children:
      - lblInfo:
          Control: Label@2.5.1
          Properties:
            Align: =Align.Left
            VerticalAlign: =VerticalAlign.Middle
            Color: =RGBA(248, 250, 252, 1)
            Fill: =RGBA(0, 0, 0, 0)
            Font: =Font.'Open Sans'
            FontWeight: =FontWeight.Semibold
            Height: =24
            Size: =9
            Text: =""
            Width: =34
            X: =10
            Y: =0
      - icoInfo:
          Control: Classic/Icon@2.4.0
          Properties:
            Color: =RGBA(248, 250, 252, 1)
            Icon: =Icon.Information
            Height: =12
            Width: =12
            X: =48
            Y: =6
- grpBadgeLocked:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      Fill: =RGBA(0, 0, 0, 0)
      BorderColor: =RGBA(226, 232, 240, 1)
      BorderThickness: =1
      DropShadow: =DropShadow.None
      Height: =24
      RadiusBottomLeft: =12
      RadiusBottomRight: =12
      RadiusTopLeft: =12
      RadiusTopRight: =12
      Width: =100
      X: =20
      Y: =180
    Children:
      - lblLocked:
          Control: Label@2.5.1
          Properties:
            Align: =Align.Left
            VerticalAlign: =VerticalAlign.Middle
            Color: =RGBA(15, 23, 42, 1)
            Fill: =RGBA(0, 0, 0, 0)
            Font: =Font.'Open Sans'
            FontWeight: =FontWeight.Semibold
            Height: =24
            Size: =9
            Text: =""
            Width: =66
            X: =10
            Y: =0
      - icoLocked:
          Control: Classic/Icon@2.4.0
          Properties:
            Color: =RGBA(15, 23, 42, 1)
            Icon: =Icon.Lock
            Height: =12
            Width: =12
            X: =80
            Y: =6
- grpBadgeExpired:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      Fill: =RGBA(239, 68, 68, 1)
      BorderThickness: =0
      DropShadow: =DropShadow.None
      Height: =24
      RadiusBottomLeft: =12
      RadiusBottomRight: =12
      RadiusTopLeft: =12
      RadiusTopRight: =12
      Width: =86
      X: =128
      Y: =180
    Children:
      - icoExpired:
          Control: Classic/Icon@2.4.0
          Properties:
            Color: =RGBA(248, 250, 252, 1)
            Icon: =Icon.Clock
            Height: =12
            Width: =12
            X: =8
            Y: =6
      - lblExpired:
          Control: Label@2.5.1
          Properties:
            Align: =Align.Left
            VerticalAlign: =VerticalAlign.Middle
            Color: =RGBA(248, 250, 252, 1)
            Fill: =RGBA(0, 0, 0, 0)
            Font: =Font.'Open Sans'
            FontWeight: =FontWeight.Semibold
            Height: =24
            Size: =9
            Text: =""
            Width: =54
            X: =24
            Y: =0
- grpBadgeShared:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      Fill: =RGBA(241, 245, 249, 1)
      BorderThickness: =0
      DropShadow: =DropShadow.None
      Height: =24
      RadiusBottomLeft: =12
      RadiusBottomRight: =12
      RadiusTopLeft: =12
      RadiusTopRight: =12
      Width: =98
      X: =222
      Y: =180
    Children:
      - lblShared:
          Control: Label@2.5.1
          Properties:
            Align: =Align.Left
            VerticalAlign: =VerticalAlign.Middle
            Color: =RGBA(15, 23, 42, 1)
            Fill: =RGBA(0, 0, 0, 0)
            Font: =Font.'Open Sans'
            FontWeight: =FontWeight.Semibold
            Height: =24
            Size: =9
            Text: =""
            Width: =64
            X: =10
            Y: =0
      - icoShared:
          Control: Classic/Icon@2.4.0
          Properties:
            Color: =RGBA(15, 23, 42, 1)
            Icon: =Icon.Share
            Height: =12
            Width: =12
            X: =78
            Y: =6
Implementation

Copies the customized component code directly to your clipboard. Use Ctrl+V in Power Apps Studio.
Something not pasting right? Troubleshooting guide
Badges with Icons

How to Use

Problem Solved

Integration

YAML Code

Implementation
