Los íconos se pueden usar en CSS de varias maneras, incluido el uso de fuentes de íconos, SVG en línea o archivos de imágenes externos. A continuación se muestran ejemplos de cada método:

  1. Fuentes de iconos: las fuentes de iconos son archivos de fuentes que contienen formas vectoriales en lugar de letras y números. Se pueden diseñar fácilmente con CSS. Las bibliotecas de fuentes de iconos populares incluyen Font Awesome y Material Icons. 

     HTML
     <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-EXAMPLE_HASH" crossorigin="anonymous" />
  <style>
    .icon {
      font-size: 24px;
    }
  </style>
</head>
<body>
  <i class="icon fas fa-heart"></i>
  <i class="icon fas fa-star"></i>
</body>
</html>

  2. SVG en línea: SVG en línea le permite incrustar SVG directamente en su HTML y puede diseñarlo usando CSS. 

     HTML
     <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .icon {
      width: 24px;
      height: 24px;
      fill: #ff0000; /* color */
    }
  </style>
</head>
<body>
  <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 14.36 2 11.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C15.09 3.81 16.76 3 18.5 3 21.58 3 24 5.42 24 8.5c0 2.78-3.4 5.86-8.55 11.54L12 21.35z"/></svg>
</body>
</html>

  3. Archivos de imagen externos: también puede utilizar archivos de imagen externos para iconos. 

     HTML
     <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .icon {
      width: 24px;
      height: 24px;
    }
  </style>
</head>
<body>
  <img class="icon" src="heart-icon.png" alt="Heart Icon">
  <img class="icon" src="star-icon.png" alt="Star Icon">
</body>
</html>

Asegúrese de reemplazar las URL de marcador de posición (por ejemplo, "heart-icon.png" , "star-icon.png" ) con las rutas reales a sus archivos de íconos o actualice el código según su biblioteca de íconos preferida.