Librería de iconos SVG

Iconos con relieve, de un solo color.

421 iconos en 29 categorías. Cada uno se tiñe con una variable CSS; el volumen sale de degradados neutros, sin una sola sombra.

Explorar galería Cómo se usa
Tíñelo
1234

folder.svg24 × 241 color

  1. Trasera más saturada: da profundidad sin sombra.
  2. Relleno en degradado: más luz arriba, tinte abajo.
  3. Bisel de luz interior, 0,7 unidades.
  4. Trazo de 1 unidad, más oscuro en la base.

Cómo se usa

Sin dependencias ni fuente de iconos: SVG y una variable CSS.

  1. 01

    Pega el SVG y dale color

    Todo el icono se pinta desde una variable. Ponla en el icono o en cualquier contenedor.

    <span style="--icon-color: #F272B0">
  <svg viewBox="0 0 24 24">…</svg>
</span>
  2. 02

    O usa el sprite

    Incluye el contenido de sprite.svg una vez en la página y referencia cada icono por su nombre.

    <svg width="24" height="24" style="--icon-color: #62C283">
  <use href="#folder" />
</svg>
  3. 03

    Grosor, sin fondo y relleno

    El trazo se multiplica con --icon-weight. Con --icon-fill: none el icono queda en línea y transparente. El relleno plano, de un solo tono, es otro juego de archivos: svg-fill/.

    .toolbar { --icon-weight: 1.4; }

.icon-outline { --icon-fill: none; }

/* relieve en tema oscuro */
.dark { --icon-base: #2b2925; --icon-shine: 0.2; }
  4. 04

    Abre la carpeta

    La solapa es un grupo aparte. Dos reglas de CSS y se abre al pasar el cursor.

    .flap {
  transform-origin: 12px 20px;
  transition: transform 260ms cubic-bezier(0.23, 1, 0.32, 1);
}
.row:hover .flap {
  transform: skewX(-10deg) scaleY(0.82);
}
  5. 05

    En apps iOS, con SwiftUI

    El paquete ios/SoftIcons dibuja los mismos iconos de forma nativa: color, grosor y estilo en tiempo de ejecución, con las convenciones de SF Symbols (estilo de texto, Dynamic Type, línea base). Guía en docs/ios.md.

    import SoftIcons

SoftIcon(.folder, color: .pink)             // tamaño del texto, Dynamic Type
SoftIcon(.bell, weight: .heavy, style: .outline)
SoftIcon(.home, style: .fill)               // plano, como house.fill
SoftIcon(.folder, open: isOpen ? 1 : 0)   // animable