# EuiDashboardCardContentHeaderIconComponent

**Type:** component

<p>Icon component for dashboard card headers, displaying a visual indicator for the card&#39;s content type.
Automatically sized and styled to fit within the header layout.</p>
<h3>Basic Icon</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-dashboard-card-content-header-icon icon=&quot;chart-bar:regular&quot;/&gt;</code></pre></div><h3>With Different Icons</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-dashboard-card-content-header-icon icon=&quot;users:regular&quot;/&gt;
&lt;eui-dashboard-card-content-header-icon icon=&quot;shopping-cart:regular&quot;/&gt;
&lt;eui-dashboard-card-content-header-icon icon=&quot;eui-calendar&quot;/&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Icon is decorative when paired with title text</li>
<li>Inherits color from parent card variant</li>
<li>Size is fixed at &#39;s&#39; for consistency</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Use within <code>eui-dashboard-card-content-header</code> component</li>
<li>Supports all EUI icon names and Font Awesome icons</li>
<li>Icon color adapts to card variant automatically</li>
<li>Fixed size ensures consistent header appearance</li>
</ul>


**Selector:** `eui-dashboard-card-content-header-icon`

**Standalone:** false

## Inputs

- **icon**: `string` - 
