PowerBlocks
LibraryIcon Button
FREEbuttons

Icon Button

The Icon Button is a compact, square control that displays a single centered Power Apps icon on a rounded background. It's the building block of toolbars, action menus and table row actions where space is tight and a label would be redundant.

Palette:

Original palette · works in every Power Apps locale

Paste directly into Power Apps Studio

YAML source

# Icon Button — PowerBlocks (FREE)

- IconButton:
    Control: GroupContainer
    Variant: ManualLayout
    Properties:
      Width: =44
      Height: =44
      Fill: =RGBA(38, 38, 38, 1)
      BorderColor: =RGBA(64, 64, 64, 1)
      BorderThickness: =1
      RadiusTopLeft: =8
      RadiusTopRight: =8
      RadiusBottomLeft: =8
      RadiusBottomRight: =8
      DropShadow: =DropShadow.None
    Children:
      - BtnIcon:
          Control: Classic/Icon
          Properties:
            Icon: =Icon.Edit
            Width: =20
            Height: =20
            X: =12
            Y: =12
            Color: =RGBA(255, 255, 255, 1)

Common use cases

Table row actions

Edit, delete or open icons placed at the end of each gallery row keep dense lists clean and scannable.

Toolbar clusters

Group several icon buttons for refresh, filter and export actions at the top of a data screen.

Floating actions

Use a single icon button as an add (+) control anchored to a corner of the screen.

How to use Icon Button in Power Apps

  1. 1Open the component page — the YAML uses the invariant Power Fx syntax and works in every Power Apps locale.
  2. 2Click "Copy YAML" to copy the full component definition to your clipboard.
  3. 3In Power Apps Studio, open your screen in the Tree view and paste (Ctrl+V) — the component appears ready to use.
  4. 4Rebind the data-driven properties (Items, OnSelect, Fill, Text) to your own data source and theme.

Tip — Always set the AccessibleLabel property so screen readers announce the action — icon-only buttons need a text equivalent.

Related buttons components