Icon - CSS Component ​

Attention!

Make sure you import the proper CSS stylesheet. Check CSS components packages here. Icons are excluded of the general import and need to be loaded manually. Check how you can import icons here

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

Construction ​

The CSS component uses a <i> tag. Using the z-icon HTML custom attribute will render the icon CSS component.

z-icon ​

The z-icon parameter is the main parameter used to render the icon component. Make sure that you specify, correctly, the name of the icon you want to use. Check the icon list here.

The z-icon attribute has two optional modifiers that can be applied in order after the name of the icon, using the colon (:) as a separator. The patter would be <name><?:size><?:style>.

  • The first modifier is size and this attribute can receive the values xs, s, m or l. The default size is m. Check the size section. This attribute uses the --z-icon--size CSS custom property to set the size of the icon.
  • The second modifier is style and this attribute can receive the value line to render the outlined version of the icon. Check the styling section

z-color ​

The attribute z-color changes the color of the icon. The possible values are: default, black, white, teal, moss, lilac, peach, candy, mint, lime, lemon, powder-pink.

You can also use the --z-icon--color CSS custom property to set the color of the icon.

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/Icon.css" />
Code
html
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ZDS | Icon style example</title>

    <!-- #region imports -->
    <link rel="stylesheet" href="/0.5.0/@zurich/css-components/base.css" />
    <link rel="stylesheet" href="/0.5.0/@zurich/design-tokens/Icons.css" />
    <link rel="stylesheet" href="/0.5.0/@zurich/css-components/Icon.css" />
    <!-- #endregion imports -->

    <link rel="stylesheet" href="/0.5.0/examples/styles.css" />
    <script type="module" src="/0.5.0/examples/params-script.js"></script>
  </head>

  <body>
    <table>
      <thead>
        <tr>
          <th></th>
          <th>-</th>
          <th>peach</th>
          <th>mint</th>
          <th>small</th>
          <th>xs</th>
          <th>lemon:s</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>solid</th>
          <td>
            <div>
              <i z-icon icon="trash"></i>
            </div>
          </td>
          <td>
            <div>
              <i z-icon="peach" icon="trash"></i>
            </div>
          </td>
          <td>
            <div>
              <i z-icon="mint" icon="trash"></i>
            </div>
          </td>
          <td>
            <div>
              <i z-icon="s" icon="bookmark"></i>
            </div>
          </td>
          <td>
            <div>
              <i z-icon="xs" icon="bookmark"></i>
            </div>
          </td>
          <td>
            <div>
              <i z-icon="lemon:s" icon="bookmark"></i>
            </div>
          </td>
        </tr>
        <tr>
          <th>outline</th>
          <td>
            <div>
              <i z-icon icon="trash:line"></i>
            </div>
          </td>
          <td>
            <div>
              <i z-icon="peach" icon="trash:line"></i>
            </div>
          </td>
          <td>
            <div>
              <i z-icon="mint" icon="trash:line"></i>
            </div>
          </td>
          <td>
            <div>
              <i z-icon="s" icon="bookmark:line"></i>
            </div>
          </td>
          <td>
            <div>
              <i z-icon="xs" icon="bookmark:line"></i>
            </div>
          </td>
          <td>
            <div>
              <i z-icon="lemon:s" icon="bookmark:line"></i>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </body>

</html>