Create extra small icon button for use inside when embedded inside other small sized components.

## Summary
Icon buttons currently have different size definitions from the rest of the system. The naming of this is slightly confusing and could be improved. By using an extra small icon button, and providing up to a large size, it allows icon buttons to be consistently aligned with other same-sized components and allows buttons to be embedded within other components by using a size step down.

## 💬 Description
For example, our default sizes use the following values:
Default: 40px
Small: 32px
Large: 48px

Currently, icon buttons have the following sizes:
Default: 32x32px
Small: 24x24px
Large: 40x40px

The suggestion is to change the icon button sizes to the following:
Default: 40x40px
Small: 32x32px
Extra-Small: 24x24px
Large: 48x48px

This would allow a user to layout a series of components including an icon button adjacent to one another and achieve consistent alignment.

For nested icon buttons in other sized components, the size below can be used. For example, a default sized text field (40px height) can contain a small sized icon button (32x32px) whilst maintaing padding around it.

## 💰 Use value
Makes sizing properties consistent across icon buttons and other components and provides a larger 48px icon button for large sized component layouts.

## Additional info
Need to take care when making the change in Figma as this will require other components that use the buttons nested to be re-linked and re-published.

Review the existing icon button implementation and its corresponding Figma component definitions first. Align the sizes to 40px default, 32px small, 24px extra-small, and 48px large, then check nested components in Figma and relink and republish any affected components.

Written by the indexing model from the issue text.