GEF
Menú

Iconos

Iconos de acción en una fuente de iconos autogenerada.

Contenido

Iconos

Estos son los iconos incluidos en la fuente autogenerada. La información sobre cómo añadir o modificar estos iconos se encuentra en el apartado iconos de la documentación de mantenimiento.

icon icon--access
icon icon--alert-full
icon icon--alert
icon icon--arrow-big
icon icon--arrow-down
icon icon--arrow-drop-down
icon icon--arrow-drop-up
icon icon--arrow-left-bar
icon icon--arrow-left
icon icon--arrow-right-bar
icon icon--arrow-right
icon icon--arrow-up
icon icon--ask-full
icon icon--ask
icon icon--asterisk
icon icon--attachment
icon icon--backward
icon icon--book
icon icon--briefcase
icon icon--calendar-full
icon icon--calendar
icon icon--campus
icon icon--checkbox-form
icon icon--checkbox-off
icon icon--checkbox-on
icon icon--checkmark-double
icon icon--checkmark
icon icon--classroom
icon icon--clean
icon icon--clock-full
icon icon--clock
icon icon--close
icon icon--comment
icon icon--company
icon icon--contact
icon icon--copy-full
icon icon--copy
icon icon--cup
icon icon--delete-note
icon icon--device
icon icon--document-fold
icon icon--document
icon icon--download
icon icon--edit-pencil
icon icon--edit
icon icon--error-disconnect
icon icon--error-server
icon icon--euro-circle
icon icon--event-academic
icon icon--event-circle-fill
icon icon--event-circle
icon icon--event-extern
icon icon--event-personal
icon icon--excel
icon icon--exclaim-full
icon icon--exclaim
icon icon--exit
icon icon--external-link
icon icon--faq
icon icon--filter-list
icon icon--flag
icon icon--folder-full
icon icon--folder
icon icon--forward
icon icon--grade
icon icon--group
icon icon--groups-full
icon icon--groups
icon icon--heart-full
icon icon--heart
icon icon--hidden
icon icon--home
icon icon--info-full
icon icon--info-session
icon icon--info
icon icon--intrauoc
icon icon--lab
icon icon--library-respons
icon icon--library
icon icon--list-full
icon icon--list-simple
icon icon--list
icon icon--lock-full
icon icon--lock
icon icon--locked-full
icon icon--locked
icon icon--mail-full
icon icon--mail
icon icon--material-audio-full
icon icon--material-audio
icon icon--material-epub-full
icon icon--material-epub
icon icon--material-html5-full
icon icon--material-html5
icon icon--material-mobipocket-full
icon icon--material-mobipocket
icon icon--material-pdf-full
icon icon--material-pdf
icon icon--material-video-full
icon icon--material-video
icon icon--material-web-full
icon icon--material-web
icon icon--message
icon icon--minus-small
icon icon--mobile
icon icon--move
icon icon--new
icon icon--news
icon icon--paperwork
icon icon--pause
icon icon--pc
icon icon--pdf
icon icon--pencil
icon icon--phone-white
icon icon--phone
icon icon--play-fill
icon icon--play-simple
icon icon--play
icon icon--plus-small
icon icon--plus-square
icon icon--plus
icon icon--pointer-maps-full
icon icon--pointer-maps
icon icon--portfolio
icon icon--ppt
icon icon--print
icon icon--profile
icon icon--question-mark
icon icon--quote
icon icon--radio-button-off
icon icon--radio-button-on
icon icon--refresh
icon icon--repository
icon icon--respond
icon icon--restore
icon icon--rss-social-media
icon icon--rss-white
icon icon--save-full
icon icon--save
icon icon--scroll-to
icon icon--search-full
icon icon--search
icon icon--send-mail
icon icon--settings
icon icon--share
icon icon--show
icon icon--smiley
icon icon--social-facebook
icon icon--social-flickr
icon icon--social-instagram
icon icon--social-linkedin
icon icon--social-media-2
icon icon--social-media-3
icon icon--social-spotify
icon icon--social-twitter-white
icon icon--social-twitter
icon icon--social-vimeo
icon icon--social-whatsapp
icon icon--social-x
icon icon--social-youtube
icon icon--speed
icon icon--stop
icon icon--subcategory
icon icon--subscription
icon icon--support
icon icon--timer
icon icon--training-offer
icon icon--translation
icon icon--trash
icon icon--triangle-left
icon icon--triangle-right
icon icon--tutorship
icon icon--university
icon icon--user-simple
icon icon--user
icon icon--volume
icon icon--vote
icon icon--word
icon icon--write
icon icon--zhamburguer

Cómo usarlos

Los iconos se deben usar dentro de un elemento span vacío, con las clases .icon y la clase correspondiente al icono en cuestión. Para asegurar que la tipografía de iconos no sea leída por los lectores de pantalla, se debe añadir el atributo aria-hidden="true".

Si los elementos de interacción se presentan con un icono sin compañía de texto, se les debe agregar un span con la clase .icon-alt. Esta clase funciona igual que la clase .visually-hidden, pero si a través de la detección de font-face integrada en los scripts se comprueba que el navegador no lo soporta (y por tanto no soporta fuentes de iconos), muestra el texto alternativo.

Iconos

Link externo
<span aria-label="Link externo" role="button">
  <span aria-hidden="true" class="icon icon--external-link"></span>
  <span class="icon-alt">Link externo</span>
</span>

Variantes de tamaño

Los iconos se pueden presentar en varios tamaños dependiendo del tipo que sean y su ubicación. Se debe aplicar la clase .icon--social para los iconos de redes sociales. Se puede aplicar la clase .icon--small para presentar una versión más pequeña de los mismos iconos, y .icon--big para la versión grande. Cuando los iconos acompañan a una cabecera, éstos van alineados a la derecha y deben llevar la clase .icon--header.

Ejemplo de cabecera con icono


Ejemplo de cabecera con icono


Ejemplo de cabecera con icono


Ejemplo de cabecera con icono


Ejemplo de cabecera con icono

Ejemplo de cabecera con icono
<h1>
  <span class="icon icon--external-link icon--header float-right" aria-hidden="true"></span>
  Ejemplo de cabecera con icono
</h1>

Iconos con tamaños especiales por defecto

<span class="icon icon--mail icon--small" aria-hidden="true"></span>
<span class="icon icon--mail" aria-hidden="true"></span>
<span class="icon icon--mail icon--big" aria-hidden="true"></span>

Iconos con tamaños de medida pequeña

<span class="icon icon--radio-button-off icon--normal" aria-hidden="true"></span>
<span class="icon icon--radio-button-on icon--normal" aria-hidden="true"></span>
<span class="icon icon--radio-checkbox-off icon--normal" aria-hidden="true"></span>
<span class="icon icon--radio-checkbox-on icon--normal" aria-hidden="true"></span>
<span class="icon icon--radio-external-link icon--small" aria-hidden="true"></span>
<span class="icon icon--radio-close icon--small" aria-hidden="true"></span>
<span class="icon icon--radio-arrow-down icon--small" aria-hidden="true"></span>

Iconos con tamaños de medida mediano

<span class="icon icon--arrow-down icon--normal" aria-hidden="true"></span>
<span class="icon icon--arrow-up icon--normal" aria-hidden="true"></span>
<span class="icon icon--arrow-left icon--normal" aria-hidden="true"></span>
<span class="icon icon--arrow-right icon--normal" aria-hidden="true"></span>
<span class="icon icon--close icon--normal" aria-hidden="true"></span>
<span class="icon icon--plus icon--normal" aria-hidden="true"></span>

Iconos con tamaños de medida grande

<span class="icon icon--arrow-down icon--big" aria-hidden="true"></span>
<span class="icon icon--arrow-up icon--big" aria-hidden="true"></span>
<span class="icon icon--arrow-left icon--big" aria-hidden="true"></span>
<span class="icon icon--arrow-right icon--big" aria-hidden="true"></span>
<span class="icon icon--close icon--big" aria-hidden="true"></span>
<span class="icon icon--plus icon--big" aria-hidden="true"></span>

Iconos con tamaños de redes sociales

<span class="icon icon--social-facebook icon--normal" aria-hidden="true"></span>
<span class="icon icon--social-twitter icon--normal" aria-hidden="true"></span>
<span class="icon icon--social-linkedin icon--normal" aria-hidden="true"></span>
<span class="icon icon--social-youtube icon--normal" aria-hidden="true"></span>
<span class="icon icon--social-instagram icon--normal" aria-hidden="true"></span>
<span class="icon icon--social-flickr icon--normal" aria-hidden="true"></span>
<span class="icon icon--social-vimeo icon--normal" aria-hidden="true"></span>
<span class="icon icon--social-media-2 icon--normal" aria-hidden="true"></span>
<span class="icon icon--social-media-3 icon--normal" aria-hidden="true"></span>
<span class="icon icon--social-spotify icon--normal" aria-hidden="true"></span>

Icono buscador

<span class="icon icon--search icon--normal" aria-hidden="true"></span>
<span class="icon icon--search icon--big" aria-hidden="true"></span>

Icono play centrado

<span class="icon icon--play-center" aria-hidden="true"></span>

Icono play esquina

<span class="icon icon--play" aria-hidden="true"></span>

Iconos con tamaños especiales de enlaces

<span class="icon icon--info icon--small" aria-hidden="true"></span>
<span class="icon icon--info" aria-hidden="true"></span>
<span class="icon icon--info icon--big" aria-hidden="true"></span>

Iconos con tamaños especiales - Acceder Campus

<span class="icon icon--campus icon--normal" aria-hidden="true"></span>

Iconos con tamaños especiales - Matrícula Oberta

<span class="icon icon--book icon--book--open-registration--small" aria-hidden="true"></span>
<span class="icon icon--book icon--book--open-registration--big" aria-hidden="true"></span>

Icono Información

<span class="icon icon--info icon--info--small" aria-hidden="true"></span>
<span class="icon icon--info icon--info--normal" aria-hidden="true"></span>

Icono Alerta

<span class="icon icon--alert icon--alert--small" aria-hidden="true"></span>
<span class="icon icon--alert icon--alert--normal" aria-hidden="true"></span>

Variantes de posición

Cuando los iconos se presentan con un texto visible, se puede agregar la clase .icon--before o .icon--after para añadir un margen a la izquierda o a la derecha del icono.

Variantes de posición

<button class="btn btn--secondary">
  <span aria-hidden="true" class="icon icon--arrow-left icon--small icon--before"></span>
  Anterior
</button>
<button class="btn btn--secondary">
  Siguiente
  <span aria-hidden="true" class="icon icon--arrow-right icon--small icon--after"></span>
</button>
Subir