# IconList

*Category:* Components
*Section:* CSS Only
*Source:* https://uikit.developers.rio.cloud/#/components/iconList
*Captured:* 2026-04-27T14:58:36.730Z

The timeline component is a pure CSS component.

## IconList

### Example: Example 1

Icon list

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.

Icon list

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.

#### HTML (html)

```html
<div class="display-grid grid-cols-1 grid-cols-2-sm gap-50">
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Icon list</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <ul class="icon-list margin-bottom-0">
            <li>
                <span class="rioglyph rioglyph-ok-sign text-color-success margin-top--1">
                </span>
                <span>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span>
            </li>
            <li>
                <span class="rioglyph rioglyph-ok-sign text-color-success margin-top--1">
                </span>
                <span>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span>
            </li>
            <li>
                <span class="rioglyph rioglyph-ok-sign text-color-success margin-top--1">
                </span>
                <span>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span>
            </li>
        </ul>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Icon list</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <ul class="icon-list margin-bottom-0">
            <li>
                <span class="rioglyph rioglyph-user margin-top--1">
                </span>
                <span>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span>
            </li>
            <li>
                <span class="rioglyph rioglyph-businessman margin-top--1">
                </span>
                <span>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span>
            </li>
            <li>
                <span class="rioglyph rioglyph-businessman margin-top--1">
                </span>
                <span>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span>
            </li>
        </ul>
    </div>
</div>
```

### Example: Example 2

Tree list

Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum
Lorem ipsum

Lorem ipsum Lorem ipsum
Lorem ipsum
Lorem ipsum

Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum
Lorem ipsum

Lorem ipsum Lorem ipsum
Lorem ipsum
Lorem ipsum

Lorem Ipsum

Tree list with panels

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.

Tree list with icons

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.

#### HTML (html)

```html
<div class="display-grid grid-cols-1 grid-cols-5-sm gap-50">
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Tree list</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <ul class="tree-list margin-bottom-0 margin-left-15">
            <li>
                <span>Lorem ipsum</span>
            </li>
            <li>
                <span>Lorem ipsum</span>
                <ul>
                    <li>Lorem ipsum<ul>
                            <li>Lorem ipsum</li>
                            <li>Lorem ipsum</li>
                            <li>Lorem ipsum</li>
                        </ul>
                    </li>
                    <li>Lorem ipsum<ul>
                            <li>Lorem ipsum</li>
                            <li>Lorem ipsum</li>
                            <li>Lorem ipsum</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <span>Lorem ipsum</span>
                <ul>
                    <li>Lorem ipsum<ul>
                            <li>Lorem ipsum</li>
                            <li>Lorem ipsum</li>
                            <li>Lorem ipsum</li>
                        </ul>
                    </li>
                    <li>Lorem ipsum<ul>
                            <li>Lorem ipsum</li>
                            <li>Lorem ipsum</li>
                            <li>Lorem ipsum</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <span>Lorem Ipsum</span>
            </li>
        </ul>
    </div>
    <div class="grid-colspan-2-sm">
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Tree list with panels</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <ul class="tree-list">
            <li>
                <div class="panel panel-default panel-body margin-bottom-15 shadow-default">
                    <span>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span>
                </div>
            </li>
            <li>
                <div class="panel panel-default panel-body margin-bottom-15 shadow-default">
                    <span>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span>
                </div>
            </li>
            <li>
                <div class="panel panel-default panel-body margin-bottom-15 shadow-default">
                    <span>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span>
                </div>
            </li>
        </ul>
    </div>
    <div class="grid-colspan-2-sm">
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Tree list with icons</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <ul class="tree-list">
            <li>
                <div class="display-flex gap-5 margin-bottom-10">
                    <span class="rioglyph rioglyph-ok-sign text-color-success text-size-18 margin-top-2">
                    </span>
                    <span>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span>
                </div>
            </li>
            <li>
                <div class="display-flex gap-5 margin-bottom-10">
                    <span class="rioglyph rioglyph-ok-sign text-color-success text-size-18 margin-top-2">
                    </span>
                    <span>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span>
                </div>
            </li>
            <li>
                <div class="display-flex gap-5 margin-bottom-10">
                    <span class="rioglyph rioglyph-ok-sign text-color-success text-size-18 margin-top-2">
                    </span>
                    <span>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span>
                </div>
            </li>
        </ul>
    </div>
</div>
```