Icon

       <cds-icon shape="user" aria-label="This is an icon example that shows how to use the icon element in an application"></cds-icon>
      

Sizes

       <cds-icon shape="house" size="sm" aria-label="This is an example of an icon using a pre-defined small size"></cds-icon>
<cds-icon shape="house" size="md" aria-label="This is an example of an icon using a pre-defined medium size"></cds-icon>
<cds-icon shape="house" size="lg" aria-label="This is an example of an icon using a pre-defined large size"></cds-icon>
<cds-icon shape="house" size="xl" aria-label="This is an example of an icon using a pre-defined extra large size"></cds-icon>
<cds-icon shape="house" size="xxl" aria-label="This is an example of an icon using a pre-defined extra extra large size"></cds-icon>

<cds-icon shape="house" size="16" aria-label="This is an example of an icon using a custom size of 16 pixels wide and tall"></cds-icon>
<cds-icon shape="house" size="24" aria-label="This is an example of an icon using a custom size of 24 pixels wide and tall"></cds-icon>
<cds-icon shape="house" size="48" aria-label="This is an example of an icon using a custom size of 48 pixels wide and tall"></cds-icon>
<cds-icon shape="house" size="64" aria-label="This is an example of an icon using a custom size of 64 pixels wide and tall"></cds-icon>
<cds-icon shape="house" size="128" loading aria-label="This is an example of an icon using a custom size of 128 pixels wide and tall"></cds-icon>
      

Badges

       <cds-icon shape="user" size="lg" badge="info" aria-label="This is an example of an icon of a user with a blue informational badge"></cds-icon>
<cds-icon shape="user" size="lg" badge="success" aria-label="This is an example of an icon of a user with a green badge indicating success"></cds-icon>
<cds-icon shape="user" size="lg" badge="danger" aria-label="This is an example of an icon of a user with a red badge indicating danger or an error"></cds-icon>
<cds-icon shape="user" size="lg" badge="warning" aria-label="This is an example of an icon of a user with a dark orange badge indicating a warning"></cds-icon>
<cds-icon shape="user" size="lg" badge="warning-triangle" aria-label="This is an example of an icon of a user with a dark orange triangle indicating something may be wrong"></cds-icon>
<cds-demo inverse inline-block>
    <cds-icon shape="user" size="lg" badge="inherit-triangle" inverse aria-label="This is an example of an icon of a user on a dark background with a warning triangle that is the same color as the icon"></cds-icon>
</cds-demo>
      

Status

       <cds-icon shape="user" size="lg" aria-label="This is an example of an icon of a user with the default color of the surrounding text"></cds-icon>
<cds-icon shape="user" status="info" size="lg" aria-label="This is an example of a blue, informational icon of a user"></cds-icon>
<cds-icon shape="user" status="success" size="lg" aria-label="This is an example of a green icon of a user indicating success"></cds-icon>
<cds-icon shape="user" status="warning" size="lg" aria-label="This is an example of a dark orange icon of a user indicating a warning"></cds-icon>
<cds-icon shape="user" status="danger" size="lg" aria-label="This is an example of a red icon of a user indicating danger or an error"></cds-icon>

<cds-icon shape="user" size="lg" solid aria-label="This is an example of an icon of a user completely filled in with the default color of the surrounding text"></cds-icon>
<cds-icon shape="user" status="info" size="lg" solid aria-label="This is an example of an icon of a user completely filled in with the blue, informational color"></cds-icon>
<cds-icon shape="user" status="success" size="lg" solid aria-label="This is an example of an icon of a user completely filled in with a green color indicating success"></cds-icon>
<cds-icon shape="user" status="warning" size="lg" solid aria-label="This is an example of an icon of a user completely filled in with a dark orange color indicating warning"></cds-icon>
<cds-icon shape="user" status="danger" size="lg" solid aria-label="This is an example of an icon of a user completely filled in with a red color indicating danger or an error"></cds-icon>
      

StatusInverse

>

       <cds-demo inverse inline-block>
    <cds-icon shape="user" inverse size="lg" aria-label="This is an example of an icon of a user on a dark background with the default color of the surrounding text"></cds-icon>
    <cds-icon shape="user" inverse status="info" size="lg" aria-label="This is an example of a blue, informational icon of a user on a dark background"></cds-icon>
    <cds-icon shape="user" inverse status="success" size="lg" aria-label="This is an example of a green icon of a user on a dark background indicating success"></cds-icon>
    <cds-icon shape="user" inverse status="warning" size="lg" aria-label="This is an example of a dark orange icon of a user on a dark background indicating a warning"></cds-icon>
    <cds-icon shape="user" inverse status="danger" size="lg" aria-label="This is an example of a red icon of a user on a dark background indicating danger or an error"></cds-icon>

    <cds-icon shape="user" inverse size="lg" solid aria-label="This is an example of an icon of a user completely filled in with the default color of the surrounding text on a dark background"></cds-icon>
    <cds-icon shape="user" inverse status="info" size="lg" solid aria-label="This is an example of an icon of a user completely filled in with the blue, informational color on a dark background"></cds-icon>
    <cds-icon shape="user" inverse status="success" size="lg" solid aria-label="This is an example of an icon of a user on a dark background completely filled in with a green color indicating success"></cds-icon>
    <cds-icon shape="user" inverse status="warning" size="lg" solid aria-label="This is an example of an icon of a user on a dark background completely filled in with a dark orange color indicating warning"></cds-icon>
    <cds-icon shape="user" inverse status="danger" size="lg" solid aria-label="This is an example of an icon of a user on a dark background completely filled in with a red color indicating danger or an error"></cds-icon>></cds-icon>
</cds-demo>
      

Direction

       <cds-icon shape="image" size="lg" direction="up" aria-label="This is an example of an icon whose glyph is directed with its top to point upward. This is the default icon direction."></cds-icon>
<cds-icon shape="image" size="lg" direction="left" aria-label="This is an example of an icon whose glyph is directed with its top to point to the left."></cds-icon>
<cds-icon shape="image" size="lg" direction="down" aria-label="This is an example of an icon whose glyph is directed with its top to point downward."></cds-icon>
<cds-icon shape="image" size="lg" direction="right" aria-label="This is an example of an icon whose glyph is directed with its top to point to the right."></cds-icon>
      

CustomStyles

The first icon should be green with a yellow badge
The second icon should be all pink (even the warning triangle should be pink)
The third icon should be default gray color with a custom pink badge

       <style>
    .custom-icon-colors {
        background: black;
        padding: 8px 12px;
        border-radius: 3px;
        display: inline-block;
        margin-left: 12px;
        position: relative;
    }

    .custom-icon-colors.c {
        background: #dcdcdc;
    }

    .custom-icon-colors::before {
        content: 'X';
        font-size: 14px;
        position: absolute;
        display: block;
        top: 0;
        left: 4px;
        color: white;
    }

    .custom-icon-colors.a::before {
        content: 'A';
    }

    .custom-icon-colors.b::before {
        content: 'B';
    }

    .custom-icon-colors.c::before {
        content: 'C';
        color: #313131;
    }

    .custom-icon-colors cds-icon {
        height: 36px;
        width: 36px;
    }

    .icon-a {
        --color: limegreen;
        --badge-color: yellow;
    }

    .icon-b {
        --color: fuchsia;
        --badge-color: fuchsia;
    }

    .icon-c {
        --badge-color: fuchsia;
    }
</style>
<div class="custom-icon-colors a">
    <cds-icon shape="user" badge="default" class="icon-a" aria-label="This is an example of how an icon can be visually customized."></cds-icon>
</div>
<div class="custom-icon-colors b">
    <cds-icon shape="user" class="icon-b" badge="warning-triangle" aria-label="This is another example of how an icon can be visually customized."></cds-icon>
</div>
<div class="custom-icon-colors c">
    <cds-icon shape="user" badge="default" class="icon-c" aria-label="This is a third example of how an icon can be visually customized."></cds-icon>
</div>
<p>
    <i>The first icon should be green with a yellow badge</i><br />
    <i>The second icon should be all pink (even the warning triangle should be pink)</i><br />
    <i>The third icon should be default gray color with a custom pink badge</i>
</p>
      

Flip

       <cds-icon size="lg" shape="image" aria-label="This is an example of an icon whose glyph is positioned upright. This is the default."></cds-icon>
<cds-icon size="lg" flip="vertical" shape="image" aria-label="This is an example of an icon whose glyph is flipped vertically."></cds-icon>
<cds-icon size="lg" flip="horizontal" shape="image" aria-label="This is an example of an icon whose glyph is flipped horizontally."></cds-icon>
      

DarkTheme

       <div cds-layout="vertical gap:sm" cds-theme="dark" cds-text="body">
    <div cds-layout="horizontal gap:sm">
        <cds-icon shape="user" size="lg" badge="info"></cds-icon>
        <cds-icon shape="user" size="lg" badge="success"></cds-icon>
        <cds-icon shape="user" size="lg" badge="danger"></cds-icon>
        <cds-icon shape="user" size="lg" badge="warning"></cds-icon>
        <cds-icon shape="user" size="lg" badge="warning-triangle"></cds-icon>
    </div>

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

    <div cds-layout="horizontal gap:sm">
        <cds-icon shape="user" size="lg" solid></cds-icon>
        <cds-icon shape="user" status="info" size="lg" solid></cds-icon>
        <cds-icon shape="user" status="success" size="lg" solid></cds-icon>
        <cds-icon shape="user" status="warning" size="lg" solid></cds-icon>
        <cds-icon shape="user" status="danger" size="lg" solid></cds-icon>
    </div>
</div>