Theme: Light | Lightest | Dark | Darkest Scale: Medium | Large

Icon

Usage notes

Icons ship with a set of SVGs.

Default


        <coral-icon icon="add" title="Add"></coral-icon>

No Icon

Toggle markup


        <coral-icon title="Add"></coral-icon>
        <coral-icon icon="" title="Add"></coral-icon>

Sizing

Toggle markup


        <coral-icon icon="add" title="Add" size="XXS"></coral-icon>
        <coral-icon icon="add" title="Add" size="XS"></coral-icon>
        <coral-icon icon="add" title="Add" size="S"></coral-icon>
        <coral-icon icon="add" title="Add" size="M"></coral-icon>
        <coral-icon icon="add" title="Add" size="L"></coral-icon>
        <coral-icon icon="add" title="Add" size="XL"></coral-icon>
        <coral-icon icon="add" title="Add" size="XXL"></coral-icon>

Color Icon

Toggle markup


        <style>
          .red-icon {
            color: red;
          }
        </style>

        <coral-icon class="red-icon" icon="add" size="L" title="Add"></coral-icon>

Icon ID support

Toggle markup


        <coral-icon size="L" icon="spectrum-icon-24-AdobeExperienceCloudColor" autoarialabel="on"></coral-icon>
        <coral-icon size="L" icon="spectrum-icon-24-AdobeAdvertisingCloudColor_Light" autoarialabel="on"></coral-icon>
        <coral-icon size="L" icon="spectrum-icon-24-AdobeExperienceManagerColor_Dark" autoarialabel="on"></coral-icon>
        <coral-icon size="L" icon="spectrum-icon-24-AdobeAnalyticsColor_Light" autoarialabel="on"></coral-icon>
        <coral-icon size="L" icon="spectrum-icon-24-AdobeAudienceManagerColor_Light" autoarialabel="on"></coral-icon>
        <coral-icon size="L" icon="spectrum-icon-24-AdobeCampaignColor_Light" autoarialabel="on"></coral-icon>
        <coral-icon size="L" icon="spectrum-icon-24-AdobeMediaOptimizerColor_Light" autoarialabel="on"></coral-icon>
        <coral-icon size="L" icon="spectrum-icon-24-AdobePrimetimeColor_Light" autoarialabel="on"></coral-icon>
        <coral-icon size="L" icon="spectrum-icon-24-AdobeSocialColor_Light" autoarialabel="on"></coral-icon>
        <coral-icon size="L" icon="spectrum-icon-24-AdobeTargetColor_Light" autoarialabel="on"></coral-icon>
        <coral-icon size="L" icon="spectrum-icon-24-GoogleColor_Light" autoarialabel="on"></coral-icon>
        <coral-icon size="L" icon="spectrum-icon-24-FacebookColor_Light" autoarialabel="on"></coral-icon>
        <coral-icon size="L" icon="spectrum-icon-24-FacebookCircleColor_Light" autoarialabel="on"></coral-icon>
        <coral-icon size="L" icon="spectrum-icon-24-YouTubeColor_Light" autoarialabel="on"></coral-icon>
        <coral-icon size="L" icon="spectrum-icon-24-YouTubeCircleColor_Light" autoarialabel="on"></coral-icon>
        <coral-icon size="L" icon="spectrum-icon-18-ZoomIn" autoarialabel="on"></coral-icon>
        <coral-icon size="L" icon="spectrum-css-icon-TripleGripper" autoarialabel="on"></coral-icon>

Inline with text

This is a paragraph that contains an inline icon.

Toggle markup


        <p>
          This is a paragraph that contains an <coral-icon icon="add" alt="Add"></coral-icon> inline icon.
        </p>

With URL

Toggle markup


        <coral-icon icon="http://via.placeholder.com/150x150" size="XXS" alt="Smallest" title="XXS"></coral-icon>
        <coral-icon icon="http://via.placeholder.com/150x150" size="XS" alt="Smaller" title="XS"></coral-icon>
        <coral-icon icon="http://via.placeholder.com/150x150" size="S" alt="Small" title="S"></coral-icon>
        <coral-icon icon="http://via.placeholder.com/150x150" size="M" alt="Medium" title="M"></coral-icon>
        <coral-icon icon="http://via.placeholder.com/150x150" size="L" alt="Large" title="L"></coral-icon>
        <coral-icon icon="http://via.placeholder.com/150x150" size="XL" alt="Larger" title="XL"></coral-icon>
        <coral-icon icon="http://via.placeholder.com/150x150" size="XXL" alt="Largest" title="XXL"></coral-icon>

With IMG

Toggle markup


        <coral-icon size="XXS" alt="Smallest" title="XXS">
          <img src="http://via.placeholder.com/150x150">
        </coral-icon>
        <coral-icon size="XS" alt="Smaller" title="XS">
          <img src="http://via.placeholder.com/150x150">
        </coral-icon>
        <coral-icon size="S" alt="Small" title="S">
          <img src="http://via.placeholder.com/150x150">
        </coral-icon>
        <coral-icon size="M" alt="Medium" title="M">
          <img src="http://via.placeholder.com/150x150">
        </coral-icon>
        <coral-icon size="L" alt="Large" title="L">
          <img src="http://via.placeholder.com/150x150">
        </coral-icon>
        <coral-icon size="XL" alt="Larger" title="XL">
          <img src="http://via.placeholder.com/150x150">
        </coral-icon>
        <coral-icon size="XXL" alt="Largest" title="XXL">
          <img src="http://via.placeholder.com/150x150">
        </coral-icon>

Custom aria-label

Toggle markup


        <coral-icon aria-label="Custom label" autoarialabel="off" icon="ChevronRight"></coral-icon>
        <coral-icon aria-label="Custom label" icon="http://via.placeholder.com/150x150" alt="placeholder"></coral-icon>