Josetxu iconsDescargar

Josetxu icons INICIO

Josetxu icons es un Set de Iconos totalmente gratuito, creados solo con CSS usando los pseudo-elementos :before y :after.

Actualizado el 10/07/2023

  • iconos


    Seguimos creando y añadiendo nuevos iconos
  • simple


    Muy fácil de usar y de sencilla aplicación
  • dinámica


    Cambia las opciones de los iconos fácilmente
  • modificable


    Mejora los iconos añadiendo más detalles

El set también incluye algunas opciones básicas para modificar los iconos fácilmente, y con un poco de imaginación puedes crear tus propios iconos.

Iconos recientes


  • puzzle pieceji-puzzle-piece
  • rocketji-rocket
  • webcamji-webcam
  • joystickji-joystick
  • dropperji-dropper
  • textji-text
  • seekji-seek
  • gauge dotsji-gauge-dots
  • pie chartji-pie-chart
  • bar chartji-bar-chart
  • saladji-salad
  • centeringji-centering
  • music noteji-music-note
  • panoramicji-panoramic
  • bulbji-bulb
  • steering wheelji-steering-wheel

Opciones


ICONOS

Josetxu icons ICONOS

Aquí puedes ver los 200 iconos que componen el set. He añadido un panel de opciones para probar las diferentes combinaciones directamente en los iconos.

OPCIONES
ver clases css ninguna clase
seleccionada
  • web
  • homeji-home
  • home 2ji-home2
  • commentji-comment
  • mailji-mail
  • userji-user
  • usersji-users
  • bookmarkji-bookmark
  • mapji-map
  • markerji-marker
  • linkji-link
  • starji-star
  • tagji-tag
  • tagsji-tags
  • categoryji-category
  • categoriesji-categories
  • copyrightji-copyright
  • copyright circledji-copyrightcircled
  • calendarji-calendar
  • simple calendarji-calendarsimple
  • searchji-search
  • seekji-seek
  • controls
  • playji-play
  • stopji-stop
  • pauseji-pause
  • recji-rec
  • fast forwardji-forward
  • rewindji-rewind
  • slow forwardji-slowforward
  • slow rewindji-slowrewind
  • tools
  • gearji-gear
  • editji-edit
  • hammerji-hammer
  • wrenchji-wrench
  • screwdriverji-screwdriver
  • lockji-lock
  • unlockji-unlock
  • equalizerji-equalizer
  • opacityji-opacity
  • binji-bin
  • eraserji-eraser
  • open eyeji-eyeopen
  • closed eyeji-eyeclosed
  • gaugeji-gauge
  • gauge dotsji-gauge-dots
  • door lockji-doorlock
  • uploadji-upload
  • downloadji-download
  • thermometerji-thermometer
  • textji-text
  • dropperji-dropper
  • arrows
  • border rightji-arrowborderright
  • border leftji-arrowborderleft
  • border topji-arrowbordertop
  • border bottomji-arrowborderbottom
  • solid rightji-arrowsolidright
  • solid leftji-arrowsolidleft
  • solid topji-arrowsolidtop
  • solid bottomji-arrowsolidbottom
  • linear nextji-arrowlinearnext
  • linear backji-arrowlinearback
  • linear upji-arrowlinearup
  • linear downji-arrowlineardown
  • curved nextji-arrowcurvednext
  • curved backji-arrowcurvedback
  • curved upji-arrowcurvedup
  • curved downji-arrowcurveddown
  • dates
  • dateji-date
  • 25 eneji-date ji-dt-25 ji-dt-ene
  • 28 febji-date ji-dt-28 ji-dt-feb
  • 2 marji-date ji-dt-2 ji-dt-mar
  • 23 abrji-date ji-dt-23 ji-dt-abr
  • 4 mayji-date ji-dt-4 ji-dt-may
  • 15 junji-date ji-dt-15 ji-dt-jun
  • 7 julji-date ji-dt-7 ji-dt-jul
  • 13 agoji-date ji-dt-13 ji-dt-ago
  • 28 sepji-date ji-dt-28 ji-dt-sep
  • 30 octji-date ji-dt-30 ji-dt-oct
  • 16 novji-date ji-dt-16 ji-dt-nov
  • 31 dicji-date ji-dt-31 ji-dt-dic
  • multimedia
  • photoji-photo
  • imageji-image
  • videoji-video
  • playerji-player
  • microji-micro
  • soundji-sound
  • muteji-mute
  • mutedji-muted
  • files
  • fileji-file
  • file doubleji-filedouble
  • file textji-filetext
  • new fileji-filenew
  • folderji-folder
  • new folderji-foldernew
  • other folderji-folderother
  • open folderji-folderopen
  • file jpgji-filetypejpg
  • file pngji-filetypepng
  • file gifji-filetypegif
  • file pdfji-filetypepdf
  • file txtji-filetypetxt
  • file htmji-filetypehtml
  • file cssji-filetypecss
  • file phpji-filetypephp
  • file jsji-filetypejs
  • devices
  • desktopji-desktop
  • tabletji-tablet
  • mobileji-mobile
  • mp3ji-mp3
  • headphonesji-headphones
  • headphones 2ji-headphones2
  • discji-disc
  • big discji-discbig
  • pendriveji-pendrive
  • virtual realityji-vr
  • fingerprintji-fingerprint
  • photo cameraji-photocam
  • mouseji-mouse
  • monitorji-monitor
  • joystickji-joystick
  • arcadeji-arcade
  • webcamji-webcam
  • info
  • infoji-info
  • warningji-warning
  • successji-success
  • errorji-error
  • infoji-infocircled
  • warningji-warningcircled
  • successji-successcircled
  • errorji-errorcircled
  • battery
  • battery 0ji-battery0
  • battery 25ji-battery25
  • battery 50ji-battery50
  • battery 75ji-battery75
  • battery 100ji-battery100
  • battery 0/4ji-battery-0-4
  • battery 1/4ji-battery-1-4
  • battery 2/4ji-battery-2-4
  • battery 3/4ji-battery-3-4
  • battery 4/4ji-battery-4-4
  • miscelanea
  • magnetji-magnet
  • reloadji-reload
  • bannedji-banned
  • pillji-pill
  • pillsji-pills
  • pill tabletji-pilltablet
  • childji-child
  • cupji-cup
  • beerji-beer
  • wifiji-wifi
  • clockji-clock
  • filled clockji-clockfilled
  • rounded clockji-clockrounded
  • filled rounded clockji-clockfilledrounded
  • square clockji-clocksquare
  • filled square clockji-clockfilledsquare
  • tvji-tv
  • balloonji-balloon
  • targetji-target
  • targetingji-targeting
  • targeting 2ji-targeting2
  • targeting 3ji-targeting3
  • burgerji-burger
  • candyji-candy
  • olympicsji-olympics
  • mountainsji-mountains
  • climberji-climber
  • routeji-route
  • footprintji-footprint
  • puzzle pieceji-puzzle-piece
  • rocketji-rocket
  • pie chartji-pie-chart
  • bar chartji-bar-chart
  • saladji-salad
  • centeringji-centering
  • music noteji-music-note
  • panoramicji-panoramic
  • bulbji-bulb
  • steering wheelji-steering-wheel
  • steering wheel autoji-steering-wheel-auto
INICIO COMO USAR

Josetxu icons COMO USAR

Es muy fácil, para usar los iconos solo se necesitan dos cosas:

  • Elementos HTML
  • Estilos CSS
  • <i class="ji-user"></i>
  • <i class="ji-user ji-bd-base"></i>
  • <i class="ji-user ji-bg-dark"></i>
  • <i class="ji-user ji-bd-base ji-bg-dark"></i>
/*************  JOSETXU ICONS ji-icons CSS *************/

/****** Basic Icons Styles ******/
i[class^="ji-"], i[class*="ji-"] {
	width: 2.5em;
	height: 2.5em;
	border: 0.2em solid transparent;
	border-radius: 0.0625em;
	display: inline-block;
	background: transparent;
	font-size: 1em;
	font-style: normal;
}
i[class^="ji-"]:after , i[class^="ji-"]:before,
i[class*="ji-"]:after , i[class*="ji-"]:before {
	content: " ";
	float: left;
	border-radius: 0.125em;
}

/***** Specific Icons Styles *****/
/* user */
i.ji-user:before {
	width: 0.750em;
	height: 0.750em;
	margin-top: 0.437em;
	background: #2292dd;
	margin-left: 0.9em;
	border-radius: 100%;
}
i.ji-user:after {
	margin-left: 0.650em;
	margin-top: 0.0625em;
	background: #2292dd;
	width: 1.250em;
	height: 0.8125em;
	border-radius: 100% 100% 0 0;
}

/***** Options Icons Styles *****/
/* base border */
.ji-bd-base {
	border-color: #2292dd !important;
}
/* dark background */
.ji-bg-dark {
	background: #343434 !important;
}
	

Información sobre elementos html y semántica correcta

  • En estos iconos se usa el elemento <i> por una cuestion práctica y asociativa; es más corto y empieza por i, como "icono", por lo que se prefiere antes que el elemento <span> , que sería lo correcto semánticamente.
ICONOS OPCIONES

Josetxu icons OPCIONES

Se incluyen algunas opciones que permiten modificar los iconos fácilmente.

Para aplicar estas opciones se usan clases con el prefijo ji- que afectarán a distintas propiedades css.


Opción Prefijo de clase Propiedad CSS Ejemplos
Tamaño ji-sz- font-size
Fondo ji-bg- background
Borde ji-bd- border-color
Redondeado ji-rd- border-radius
Color ji-cl- filter
Fecha ji-dt- content

Existen varias clases predefinidas para cada una de las diferentes opciones, las tenemos detalladas a continuación:

Tamaño

El set incluye 7 tamaños predefinidos.

Clase HTML CSS Icono
ji-sz-xxs <i class="ji-user ji-sz-xxs"></i> .ji-sz-xxs { font-size: 0.5em !important; }
ji-sz-xs <i class="ji-user ji-sz-xs"></i> .ji-sz-xs { font-size: 0.75em !important; }
ji-sz-1 <i class="ji-user ji-sz-1"></i> .ji-sz-1 { font-size: 1em !important; }
ji-sz-2 <i class="ji-user ji-sz-2"></i> .ji-sz-2 { font-size: 2em !important; }
ji-sz-3 <i class="ji-user ji-sz-3"></i> .ji-sz-3 { font-size: 3em !important; }
ji-sz-4 <i class="ji-user ji-sz-4"></i> .ji-sz-4 { font-size: 4em !important; }
ji-sz-5 <i class="ji-user ji-sz-5"></i> .ji-sz-5 { font-size: 5em !important; }

Información de tamaños

  • El tamaño por defecto (aplicado en los estilos básicos de iconos) es 1em, por lo que la clase ji-sz-1 no es necesario usarla, ya que sin poner ninguna clase se aplicará un tamaño de 1em por defecto.

Fondo

Se incluyen 7 colores de fondo predefinidos.

Clase HTML CSS Icono
ji-bg-dark <i class="ji-user ji-bg-dark"></i> .ji-bg-dark { background: #343434 !important; }
ji-bg-semidark <i class="ji-user ji-bg-semidark"></i> .ji-bg-semidark { background: #676767 !important; }
ji-bg-semilight <i class="ji-user ji-bg-semilight"></i> .ji-bg-semilight { background: #999999 !important; }
ji-bg-light <i class="ji-user ji-bg-light"></i> .ji-bg-light { background: #e6e6e6 !important; }
ji-bg-baselight <i class="ji-user ji-bg-baselight"></i> .ji-bg-baselight { background: #ffcaa6 !important; }
ji-bg-basedark <i class="ji-user ji-bg-basedark"></i> .ji-bg-basedark { background: #f60 !important; }
ji-bg-base <i class="ji-user ji-bg-base ji-cl-white"></i> .ji-bg-base { background: #f60 !important; }

Información de los fondos

  • Si no se aplica ningún color de fondo este será transparente.
  • Los fondos Base se colorean junto con el icono al aplicar un cambio de color.
  • Los fondos Claro (light) y Oscuro (dark) mantienen su color aunque se cambie el color del icono.

Limitaciones de los fondos

  • Algunos iconos pueden dar problemas cuando se usan en color blanco, ya que utilizan el valor linear-gradient para la propiedad background y se usa el blanco para emular el fondo. En nuevas versiones se intentará tratar este problema. Problema resuelto.

Borde

Se incluyen 5 bordes predefinidos.

Clase HTML CSS Icono
ji-bd-base <i class="ji-user ji-bd-base"></i> .ji-bd-base { border-color: var(--color1) !important; }
ji-bd-baselight <i class="ji-user ji-bd-baselight"></i> .ji-bd-baselight { border-color: #ffcaa6 !important; }
ji-bd-basedark <i class="ji-user ji-bd-basedark"></i> .ji-bd-basedark { border-color: #ca5100 !important; }
ji-bd-light <i class="ji-user ji-bd-light"></i> .ji-bd-light { border-color: #ffcaa6 !important; }
ji-bd-dark <i class="ji-user ji-bd-dark"></i> .ji-bd-dark { border-color: #ca5100 !important; }

Información de los bordes

  • Si no se aplica ningún color de borde este será transparente.
  • Los bordes Base se colorean junto con el icono al aplicar un cambio de color.
  • Los bordes Claro (light) y Oscuro (dark) mantienen su color aunque se cambie el color del icono.

Redondeado

Se incluyen 6 tipos de redondeado predefinidos.

Clase HTML CSS Icono
ji-rd-xs <i class="ji-user ji-bg-dark ji-rd-xs"></i> .ji-rd-xs { border-radius: 5% !important; }
ji-rd-1 <i class="ji-user ji-bg-dark ji-rd-1"></i> .ji-rd-1 { border-radius: 10% !important; }
ji-rd-2 <i class="ji-user ji-bg-dark ji-rd-2"></i> .ji-rd-2 { border-radius: 20% !important; }
ji-rd-3 <i class="ji-user ji-bg-dark ji-rd-3"></i> .ji-rd-3 { border-radius: 30% !important; }
ji-rd-4 <i class="ji-user ji-bg-dark ji-rd-4"></i> .ji-rd-4 { border-radius: 40% !important; }
ji-rd-5 <i class="ji-user ji-bg-dark ji-rd-5"></i> .ji-rd-5 { border-radius: 100% !important; }

Color

Se incluyen 13 colores predefinidos para los iconos.

Clase HTML CSS Icono
ji-cl-base <i class="ji-user ji-cl-base"></i> .ji-cl-base { filter: hue-rotate(0deg); }
ji-cl-purple <i class="ji-user ji-cl-purple"></i> .ji-cl-purple { filter: hue-rotate(40deg); }
ji-cl-violet <i class="ji-user ji-cl-violet"></i> .ji-cl-violet { filter: hue-rotate(60deg); }
ji-cl-pink <i class="ji-user ji-cl-pink"></i> .ji-cl-pink { filter: hue-rotate(110deg); }
ji-cl-red <i class="ji-user ji-cl-red"></i> .ji-cl-red { filter: hue-rotate(155deg); }
ji-cl-orange <i class="ji-user ji-cl-orange"></i> .ji-cl-orange { filter: hue-rotate(170deg); }
ji-cl-brown <i class="ji-user ji-cl-brown"></i> .ji-cl-brown { filter: hue-rotate(200deg); }
ji-cl-olive <i class="ji-user ji-cl-olive"></i> .ji-cl-olive { filter: hue-rotate(230deg); }
ji-cl-green <i class="ji-user ji-cl-green"></i> .ji-cl-green { filter: hue-rotate(250deg); }
ji-cl-bluegreen <i class="ji-user ji-cl-bluegreen"></i> .ji-cl-bluegreen { filter: hue-rotate(310deg); }
ji-cl-bluegray <i class="ji-user ji-cl-bluegray"></i> .ji-cl-bluegray { filter: hue-rotate(340deg); }
ji-cl-gray <i class="ji-user ji-cl-gray"></i> .ji-cl-gray { filter: grayscale(100%) opacity(40%); }
ji-cl-white <i class="ji-user ji-bg-dark ji-cl-white"></i> .ji-cl-white:before, .ji-cl-white:after {
filter: grayscale(100%) brightness(200%); }

Información sobre el color

  • Se usa un color base para poder colorear los iconos, en el set se usa el azul, con el valor hexadecimal #2292dd, por lo que la clase ji-cl-base no es necesario usarla, ya que sin poner ninguna clase se aplicará el color base por defecto.
  • Puedes cambiar el color base del set reemplazando en la hoja de estilos ese valor hexadecimal por el del color que tu elijas.
  • Al cambiar el color base se modificarán el resto de colores predeterminados, ya que la rotación de tono empezará en un ángulo diferente alrededor del círculo de color por el que se ajustan las muestras de entrada. + info
  • El cambio de color no aplicará a los colores en el rango de color del gris, ya que al no tener un tono de color definido este no puede ser modificado.

Limitaciones del color blanco

  • Para aplicar el color blanco a los iconos hay que tener en cuenta el color de fondo sobre el que estrá el icono, ya que por defecto este es transparente y si el fondo es blanco no se verá el icono.
  • El color blanco aplica solo a los pseudo-elementos before y after, no aplica al borde ni al fondo del icono como si hacen el resto de colores.
  • Hay algunos iconos que no se colorean correctamente al aplicar el color blanco ya que usan el blanco en la propiedad linear-gradient para colorear el fondo. En nuevas versiones se intentará tratar este problema. Problema resuelto.

Fecha

Se incluyen todas las fechas (con día y mes) del año.

Clase HTML CSS Icono
ji-date <i class="ji-date"></i> .ji-date:before { /* estilos especificos de icono */ ; }
.ji-date:after { /* estilos especificos de icono */ ; }
ji-dt-1 <i class="ji-date ji-dt-1"></i> .ji-dt-1 { content: "1" !important; }
ji-dt-31 <i class="ji-date ji-dt-31"></i> .ji-dt-31 { content: "31" !important; }
ji-dt-ene <i class="ji-date ji-dt-ene"></i> .ji-dt-ene { content: "ene" !important; }
ji-dt-dic <i class="ji-date ji-dt-dic"></i> .ji-dt-dic { content: "dic" !important; }
ji-dt-1
ji-dt-ene
<i class="ji-date ji-dt-1 ji-dt-ene"></i> .ji-dt-1 { content: "1" !important; }
.ji-dt-ene { content: "ene" !important; }
ji-dt-31
ji-dt-dic
<i class="ji-date ji-dt-31 ji-dt-dic"></i> .ji-dt-31 { content: "31" !important; }
.ji-dt-dic { content: "dic" !important; }

Información de fechas

  • Existen clases predeterminadas para todos los días y meses del año.
  • Para los días se usan numeros : .ji-dt-1 , .ji-dt-2 , .ji-dt-3 ... hasta .ji-dt-31
  • Para los meses se usan las tres primeras letras de cada mes, ya sea en inglés : .ji-dt-jan ... .ji-dt-dec o en español : .ji-dt-ene ... .ji-dt-dic

Limitaciones de fechas

  • Estas opciones están diseñadas para usarlas combinadas con el icono .ji-date. En cualquier otro icono funcionarán, pero el resultado no será el óptimo.

Combinaciones

Estas son algunas de las combinaciones de opciones que se pueden hacer:

HTML Icono
<i class="ji-user ji-bd-base ji-rd-5"></i>
<i class="ji-user ji-bg-light"></i>
<i class="ji-user ji-bg-baselight"></i>
<i class="ji-user ji-bg-baselight ji-bd-base ji-rd-2"></i>
<i class="ji-user ji-bg-baselight ji-bd-base ji-rd-5 ji-cl-violet"></i>
<i class="ji-user ji-bg-baselight ji-bd-basedark ji-rd-5 ji-cl-violet"></i>
<i class="ji-user ji-bg-light ji-bd-baselight ji-rd-5 ji-cl-violet"></i>
<i class="ji-user ji-bg-basedark ji-rd-5 ji-cl-violet ji-cl-white"></i>
COMO USAR SABER MAS

Josetxu icons SABER MAS

La idea de estos iconos es muy básica, usar los pseudo-elementos :before y :after para crear diferentes formas. Combinando esas formas con un poco de imaginación conseguiremos crear nuestros iconos.

Un par de ejemplos rápidos: ejemplos


Si comprendes como funcionan te será muy fácil modificar los iconos o crear los tuyos propios.

Estilos básicos

Todos los iconos necesitan unos estilos básicos y se los vamos a dar añadiendo el prefijo ji- delante de la clase que definirá el icono.

También añadiremos unos estilos básicos para los pseudo-elementos :before y :after con los que crearemos los iconos más adelante.


estilos iconos

html icono base css

i[class^="ji-"], i[class*="ji-"] {
  width: 2.5em;
  height: 2.5em;
  border: 0.2em solid transparent;
  border-radius: 0.0625em;
  display: inline-block;
  background: transparent;
  font-size: 1em;
  font-style: normal;
}

El selector css i[class^="ji-"] , i[class*="ji-"] define un cuadrado ligeramente redondeado de 2.5em de lado, con fondo transparente y un borde transparente.

Este selector aplica a cualquier elemento <i> cuya clase empiece con, o contenga, el prefijo ji- .


estilos pseudoelementos

html icono base pseudoelementos css

i[class^="ji-"]:after ,
i[class^="ji-"]:before,
i[class*="ji-"]:after ,
i[class*="ji-"]:before {
  content: " ";
  float: left;
  border-radius: 0.125em;
}
 
 

A los pseudoelementos :before y :after se les declara la propiedad content con el valor " " (vacio), necesario para mostrar este tipo de elementos, y se flotan a la izquierda. El redondeado es opcional.

Los pseudoelementos marcados en rojo en la imagen son solo una representación gráfica, no hay que escribir nada dentro del elemento <i>.


Estos estilos básicos aplicarán a todos los elementos <i> que contengan el prefijo ji- y a los respectivos pseudo-elementos :before y :after de dichos elementos <i>, que es con lo que crearemos los iconos realmente.

Estilos de iconos

Esto son un par de ejemplos de los estilos necesarios para crear iconos:


icono usuario

html icono usuario css
i.ji-user:before {
  width: 0.750em;
  height: 0.750em;
  margin-top: 0.437em;
  background: #2292dd;
  margin-left: 0.9em;
  border-radius: 100%;
}

i.ji-user:after {
  margin-left: 0.650em;
  margin-top: 0.0625em;
  background: #2292dd;
  width: 1.250em;
  height: 0.625em;
  border-radius: 100% 100% 0 0;
}

Con el :before creamos un circulo que será la cabeza del icono.

Con el :after creamos un semicirculo para el cuerpo del icono.

icono batería

html icono bateria css
i.ji-battery100:before {
  width: 1.1875em;
  height: 0.5625em;
  margin-top: 0.8125em;
  margin-left: 0.4375em;
  border: 0.1875em solid #2292dd;
}

i.ji-battery100:after {
  width: 0.1875em;
  border-left: 1.0625em solid #2292dd;
}





Con el :before creamos el borde de lo que será cuerpo de la bateria.

Con el :after creamos la barra de energía y el polo positivo de la pila.

Estilos de opciones

Un par de ejemplos de la aplicación de opciones en los iconos:


opcion borde

html icono usuario css
.ji-bd-base {
  border-color: #2292dd !important;
}

Con la clase .ji-bd-base modificamos el color del borde que tienen todos los iconos por defecto y aplicamos el color base del set de iconos.

Se pueden crear múltiples clases para los diferentes colores o tonos de color elegidos. info de opción borde

opcion fondo

html icono usuario css
.ji-bg-dark {
  background: #212121;
}

Con la clase .ji-bg-dark modificamos el color de fondo del icono y aplicamos, en este caso, un color oscuro.

Se pueden crear múltiples clases para los diferentes colores o tonos de fondo elegidos. info de opción fondo

Registro de cambios

  • v2.0 10 07 2023
    • Añadidos 25 nuevos iconos.
      • 200 iconos en total.
    • Modificado 1 icono existente.
  • v1.7 15 04 2022
    • Añadidos 24 nuevos iconos.
      • 175 iconos en total.
    • Modificados 33 iconos existentes.
    • Eliminadas más de 160 sentencias css.
    • Solucionados los errores con el color blanco.
  • v1.5 17 04 2020
    • Añadidos 50 nuevos iconos.
      • 151 iconos en total.
    • Opciones:
      • Fecha (366)
  • v1.0 01 08 2019
    • Publicación inicial.
      • 101 iconos en total.
    • Opciones:
      • Tamaño (7)
      • Fondo (7)
      • Borde (5)
      • Redondeado (6)
      • Color (13)
OPCIONES
copiado al portapapeles

Selecciona tu descarga

Incluye el archivo ji-icons-lib.css con los estilos CSS de iconos y opciones.

Incluye el archivo ji-icons-lib.css con los estilos CSS de iconos y opciones. Incluye el archivo ji-icons-list.html con el HTML de todos los iconos.
versión 2.0 DescargarJosetxu iconsBásica