To use the icon button component import the component in your JavaScript.

import '@cds/core/icon/register.js';
import '@cds/core/button/register.js';

       <div cds-layout="horizontal gap:sm">
    <cds-icon-button>
        <cds-icon shape="user"></cds-icon>
    </cds-icon-button>
    <cds-icon-button action="outline">
        <cds-icon shape="user"></cds-icon>
    </cds-icon-button>
</div>
      

       <div cds-layout="horizontal gap:sm">
    <cds-icon-button>
        <cds-icon shape="user"></cds-icon>
    </cds-icon-button>
    <cds-icon-button status="success">
        <cds-icon shape="user"></cds-icon>
    </cds-icon-button>
    <cds-icon-button status="warning">
        <cds-icon shape="user"></cds-icon>
    </cds-icon-button>
    <cds-icon-button status="danger">
        <cds-icon shape="user"></cds-icon>
    </cds-icon-button>
    <cds-icon-button status="danger" disabled>
        <cds-icon shape="user"></cds-icon>
    </cds-icon-button>
</div>
      

Outline

       <div cds-layout="horizontal gap:sm">
    <cds-icon-button action="outline">
        <cds-icon shape="user"></cds-icon>
    </cds-icon-button>
    <cds-icon-button action="outline" status="success">
        <cds-icon shape="user"></cds-icon>
    </cds-icon-button>
    <cds-icon-button action="outline" status="danger">
        <cds-icon shape="user"></cds-icon>
    </cds-icon-button>
    <cds-icon-button action="outline" disabled>
        <cds-icon shape="user"></cds-icon>
    </cds-icon-button>
</div>
      

Default ('md')

Compact ('sm')

       <div cds-layout="vertical gap:md">
    <div cds-layout="horizontal align-items:left gap:sm">
        <div cds-layout="p-r:sm align:vertical-center"><span cds-text="subsection">Default ('md')</span></div>
        <cds-icon-button>
            <cds-icon shape="user"></cds-icon>
        </cds-icon-button>
        <cds-icon-button action="outline">
            <cds-icon shape="user"></cds-icon>
        </cds-icon-button>
    </div>
    <div cds-layout="horizontal align-items:left gap:sm">
        <div cds-layout="p-r:sm align:vertical-center"><span cds-text="subsection">Compact ('sm')</span></div>
        <cds-icon-button size="sm">
            <cds-icon shape="user"></cds-icon>
        </cds-icon-button>
        <cds-icon-button action="outline" size="sm">
            <cds-icon shape="user"></cds-icon>
        </cds-icon-button>
    </div>
</div>
      

       <div cds-layout="vertical gap:sm">
    <cds-icon-button block>
        <cds-icon shape="user"></cds-icon>
    </cds-icon-button>
    <cds-icon-button block action="outline">
        <cds-icon shape="user"></cds-icon>
    </cds-icon-button>
    <cds-icon-button block size="sm">
        <cds-icon shape="user"></cds-icon>
    </cds-icon-button>
    <cds-icon-button block action="outline" size="sm">
        <cds-icon shape="user"></cds-icon>
    </cds-icon-button>
</div>
      

       <div cds-layout="horizontal gap:xs">
    <a href="javascript:void(0)">
        <cds-icon-button>
            <cds-icon shape="user"></cds-icon>
        </cds-icon-button>
    </a>
    <a href="javascript:void(0)">
        <cds-icon-button action="outline">
            <cds-icon shape="user"></cds-icon>
        </cds-icon-button>
    </a>
    <a href="javascript:void(0)">
        <cds-icon-button size="sm">
            <cds-icon shape="user"></cds-icon>
        </cds-icon-button>
    </a>
    <a href="javascript:void(0)">
        <cds-icon-button action="outline" size="sm">
            <cds-icon shape="user"></cds-icon>
        </cds-icon-button>
    </a>
</div>
      

       <div cds-layout="horizontal gap:sm align-items:bottom">
    <cds-icon-button loading-state="loading">
        <cds-icon shape="user"></cds-icon>
    </cds-icon-button>
    <cds-icon-button action="outline" loading-state="loading">
        <cds-icon shape="user"></cds-icon>
    </cds-icon-button>
    <cds-icon-button size="sm" loading-state="loading">
        <cds-icon shape="user"></cds-icon>
    </cds-icon-button>
</div>