Skip to main content

Icons

Add icons to your project to improve the usability and aesthetics of your application.

For iconography, it is recommended to use iconify.

Iconify​

Installation​

Iconify has several installation methods: via CSS, HTML, on-demand.

We recommend using the on-demand version. To learn more about the advantages and disadvantages of using this method, visit their documentation.

On-demand​

Add the following script to your HTML. For more information, visit their documentation.

<script src="https://cdn.jsdelivr.net/npm/iconify-icon@3.0.0/dist/iconify-icon.min.js"></script>

Basic Usage​

To use icons, use the icon class.

<div class="is-flex is-flex-column is-gap-3">
  <!--  DEFAULT  -->
  <iconify-icon class="icon" icon="mdi:account-outline"></iconify-icon>

  <!--  MEDIUM  -->
  <iconify-icon class="icon is-md" icon="mdi:account-outline"></iconify-icon>

  <!--  LARGE  -->
  <iconify-icon class="icon is-lg" icon="mdi:account-outline"></iconify-icon>
</div>

Text with Icon​

Home

Esto es un texto con iconos como , , y otros íconos

<div class="is-flex is-flex-column gap-4">
  <span class="icon-text">
    <iconify-icon className="icon" icon="mdi:home"></iconify-icon>
    <span>Home</span>
  </span>

  <p>
    Esto es un texto con iconos como
    <span class="icon-text">
      <iconify-icon className="icon" icon="mdi:account-outline"></iconify-icon>
      <span>,</span>
      <iconify-icon className="icon" icon="mdi:home"></iconify-icon>
      <span>,</span>
      <iconify-icon
        className="icon is-color-error"
        icon="mdi:warning"
      ></iconify-icon>
    </span>
    y otros íconos
  </p>
</div>