EntradaConjunto de pictogramas. Sprite o icono
A pesar de que los cambios en las tendencias de diseño. interfaz de usuarioEste año no fue tan importante como observamos en años anteriores, fue claramente más perfecto, más especializado, completamente cubierto y mezclando todos los mejores estilos de los iconos anteriores.
Quizás este año no fuera extremadamente "rendimiento" para los iconos de diseño, pero sin embargo, varios conjuntos interesantesQuienes merecen su atención, todavía se iluminan en el horizonte. En esta revisión, propongo considerar los 50 mejores (puramente en mi opinión) colecciones gratuitas Iconos que aparecen en acceso abierto Para 2017. Todos los conjuntos son absolutamente gratuitos y están disponibles para su descarga sin restricciones. Bajo cada imagen hay enlaces a los recursos haciendo clic en el que podrá conocer en detalle con su conjunto de iconos favoritos y si desea descargar.
Los iconos de contorno o lineales son muy populares en el mundo del desarrollo web, ya que difieren de la simplicidad especial de formas y minimalismo, sin sacrificar con la informatividad. Además, la mayoría de ellos, los pictogramas presentados se pueden usar no solo para sitios, también son excelentes para aplicaciones en plataforma android y ios.
Una colección verdaderamente enorme de iconos de alta calidad para todas las ocasiones. Hasta la fecha, se presentan aproximadamente 60,000 iconos en cualquier formato, tamaño y color. La biblioteca se actualiza diariamente y se repone, de 3 a 20 iconos por día.
Número: 60 000 +
Formatos: SVG, AI, EPS, PNG, PDF, Fuentes
El paquete incluye 1800 iconos sobre fondo blanco y negro en formatos: .Sketch .psd .ai .svg .eps y .png..
Un pequeño conjunto de iconos lineales de alta calidad en formato. .AI
Paquete gratis de 70 iconos vectoriales en formatos. .Sketch .ai.
Iconos vectoriales en formatos AI, EPS. y Svg.
Buen conjunto De los 90 iconos de contorno gratuito, así como los iconos con un relleno de fondo sólido, para boceto e ilustrador.
Bytesizando.
Excelente conjunto de iconos gratis en formato. Svg.. Cada icono se codifica manualmente en la cuadrícula de 32 x 32 y utiliza la barra SVG, que garantiza la máxima flexibilidad de estilo; Esto significa que puede personalizar el peso, el color, el tamaño y, si es necesario, haga los iconos de los bordes redondeados o cuadrados.
El conjunto presenta 38 iconos de contorno de herramientas de edición de imágenes populares, para los iconos de descarga gratuita están disponibles en AI, EPS, formatos SVG y PNG transparente (1024px).
Maravilloso conjunto de iconos de contorno absolutamente gratis en formatos .png .pdf .svg .sketch .ai
Un pequeño conjunto de mini iconos de alta calidad.
Formatos: AI, EPS, PNG, SVG
Dimensiones: 16 x 16, 32 x 32
Iconos en CSS puro
Esta sección de la revisión presenta recursos que proporcionan iconos de paquetes de acceso gratuito desarrollados en cSS puros.. Excelente alternativa al uso de imágenes como iconos. Para conectar dichas bibliotecas de los iconos, un archivo es suficiente. CSS, también en su mayor parte, estos recursos proporcionan la capacidad de conectar conjuntos de iconos directamente desde sus servidores, que es bastante conveniente.
Incluye 512 iconos, la biblioteca se repone regularmente.
Iconos de biblioteca pequeños en CSS puros.
Conjuntos de iconos de colores multicolores.
Conjunto de 30 iconos lineales de color en colores pastel frescos. El kit incluye iconos en formato vectorial (SVG) y PNG de diferentes tamaños.
Más de 120 iconos coloridos gratis en formato PSD
Colección de 30 iconos isométricos planos. Todos los iconos incluidos en el conjunto están completamente editados y configurados en Illustrator. Completa varios tamaños PNG.
Formatos: AI, EPS, PNG
Dimensiones: 57px, 114px, 228px, 456px, 912px
Un conjunto de 24 iconos multicolores con tema de deportes acuáticos. Los iconos se suministran en formato SVG y se diseñan utilizando un esquema de color de luz, verano y una escalabilidad óptima.
Conjuntos de iconos en diseño de material.
Dichos iconos están diseñados para convertirse en estándar para aplicaciones realizadas en el estilo unificado de diseño "material", que se presentó Google en versión de Android 5.0. Al mismo tiempo, son igualmente adecuados para aplicaciones de Android, y para iOS, y para aplicaciones web.
250 iconos en formato de boceto
Este es un conjunto de 900 iconos de Google para la solicitud de boceto. Todos ellos inicialmente desde bibliotecas de Googleque se actualiza periódicamente y se repone.
Iconos de personajes y pictogramas.
Conjuntos libres de iconos de varios personajes y pictogramas.
Temas universales - Conjunto de iconos vectoriales
El kit incluye 100 iconos vectoriales, que están diseñados con demandas modernas El diseño web, los iconos se presentan en formato SVG, por lo que puede editar, escalar y cambiar el color de los iconos hasta que obtenga el resultado que necesita.
Conjunto de 90 iconos lindos, multipropósito en formatos. .bosquejo. y .AI
Conjunto gratuito de iconos en PSD, AI, EPS, PDF, SVG, Bosquejo, WebFont
Un conjunto gratuito bien desarrollado de 70 iconos básicos en dos versiones, por un fondo claro y oscuro. AI y archivos de boceto completan.
La biblioteca gratuita de 100 iconos de fuente, también en el archivo proporcionó todos los códigos para la página de demostración, los formatos de fuentes web i.svg Archivos.
El kit de interfaz de usuario de la UI incluye 100 iconos vectoriales que están diseñados para cumplir con las características de las interfaces de usuario, los iconos en formato SVG, contorno y versiones de color. Puede utilizar libremente estos iconos en sus proyectos personales y comerciales.
Conjuntos de iconos de diseño gráfico y web.
Este conjunto contiene 33 iconos vectoriales completamente escalables en el estilo del contorno. Cada icono está disponible en formatos EPS, AI, PSD, PNG y SVG.
25 iconos de la categoría Figuras de diseño.
Conjunto impresionante iconos hermosos Hecho a mano, consta de 25 iconos fácilmente editables y listos para usar disponibles absolutamente. Viene en dos opciones de color (Mango & Caricicle) y todos los formatos convenientes: AI, EPS, SVG y PNG.
Puedes usar estos iconos para proyectos personales y comerciales.
Formatos: AI, EPS, SVG, PNG
Dimensiones: 16 x 16, 32 x 32
Conjunto de iconos de instrumentos artísticos.
Un conjunto de iconos libres contiene archivos vectoriales en ilustrador AI i.SVG formatos, así como en formato png, las opciones están disponibles, tanto en colores como en estilos lineales, en 5 tamaños (32px, 64px, 128px, 256px y 512px)
Los iconos se presentan en todos los formatos convenientes: EPS, AI, SVG y PNG.
Conjuntos de iconos planos
Esta sección presenta conjuntos gratuitos de iconos a los temas más diferentes de las mejores tradiciones de estilo plano. El uso de iconos planos en diseño le permitirá hacer un sitio web o una aplicación con estilo, moderno y más comprensible para el usuario.
Blobs.
Conjunto gratuito de más de 1000 iconos en esquemas de colores brillantes, presentados en formatos (AI, PSD y SVG)
Línea plana - Conjunto de iconos de UX & ECOMMERCE
83 iconos en estilo plano para la interfaz de usuario y comercio electrónico
Una biblioteca verdaderamente enorme de iconos en varios estilos para uso personal y comercial, que incluye una gran selección de iconos en diseño plano. Los iconos gratuitos están disponibles en diferentes tamaños hasta 72px y en formato PNG. Puede descargar todo el paquete completo y cada uno le gusta el icono por separado, después de seleccionar el tamaño que necesita
El conjunto de iconos para diseñar el espacio de trabajo se presenta en el acceso gratuito en formatos AI y EPS.
El conjunto presenta 70 iconos diferentes de interfaz de usuario en formatos SVG y PNG.
Conjuntos de iconos de negocios y comercio electrónico.
Un conjunto de 36 iconos gratuitos para bancos y dinero, estos iconos de estilo plano son ideales para aplicaciones o sitios web asociados con actividades bancarias. Los iconos se presentan en formularios vectoriales (AI, PSD, EPS, PNG y SVG) y, por lo tanto, se editan y cambian fácilmente.
El conjunto se realiza en un estilo plano, completo con 50 iconos brillantes que cubren todos los campos principales del comercio electrónico, incluidos los iconos de los iconos de estado de la cesta, los iconos del método de pago, los iconos de entrega y mucho, mucho más. Se presentan los iconos en dos formatos SVG y PNG, puede usarlos libremente en sus proyectos personales y comerciales.
50 iconos coloridos en temas de negocios de estilo plano se presentan en formatos AI y SVG, por lo que se pueden escalar fácilmente, sin perder la calidad de la imagen, ideal para diseños web adaptativos. Puedes usarlos libremente en tus proyectos personales y comerciales.
Conjunto gratuito de 40 iconos vectoriales en e-Commerce. Versión gratuita Contiene archivos Adobe Illustrator (.ai), PDF y PostScript (.eps) encapsulado (.eps).
Conjuntos de iconos en el tema del tiempo.
Paquete de iconos de temas del tiempo que contiene 30 iconos notables en formatos .png. y .bosquejo.. En forma perfecta en el diseño de aplicaciones y sitios web meteorológicos.
Iconos de CSS grandes iconos de fuente con 222 iconos meteorológicos listos para conectarse a bootstrap o cualquier otro proyecto para el cual se necesitan iconos meteorológicos de alta calidad. El conjunto se actualiza regularmente y se repone.
Por supuesto, los recursos presentados en la selección, es solo una pequeña parte de toda la variedad de desarrollos de diseño anteriormente y apareció durante este año. Recursos populares y largos y bienvenidos, la mayoría de ellos no necesitan una vista, por lo que esta reseña Intenté asignar un trabajo relativamente nuevo y de alta calidad. Espero que alguien sea útil.
Con todo respeto, Andrew.
Los iconos PSD son un elemento indispensable de cualquier UI de diseño, no inferior a la importancia de las fuentes, pero en la práctica rara vez se involucra en el desarrollo de los propios iconos para cada proyecto web. Por otro lado, la búsqueda de una calidad y diseño adecuado de los iconos también lleva mucho tiempo, pero hoy decidimos ayudarlo y preparamos una selección de conjuntos de iconos gratuitos para todas las ocasiones.
01. Iconos8.
Iconos8 - ¿Un conjunto de 20 mil iconos planos en cualquier formato, tamaños y color! Aquí están las categorías como los negocios, la ropa, la comida y muchos otros. Los iconos8 se pueden descargar como una aplicación para Mac o en forma de un archivo ZIP.
02. Freepik.
Brillante colección de iconos vectoriales de recurso especializado Freepik es solo uno de los sets presentados. Es ideal para proyectos empresariales e independientes. Además, la descarga de los iconos PSD puede ser en .ai, .eps y formatos .svg.
03. IconFinder
Este conjunto hecho en blanco y negro contiene una combinación de iconos de vectores emocionales y funcional claros. además iconos estándar Este kit contiene iconos en forma de corazones y ojos, lo que le permitirá brindarle a sus propios proyectos de color emocional.
04. 195 bandera plana psd iconos
Excelente icono PSD establecido para un sitio que se puede utilizar en el desarrollo de un sitio internacional, tienda en línea o blog de viaje. El conjunto incluye 195 iconos gratis con esquinas redondeadas.
05. Conjunto de iconos de ui de metro
Si usted es un ventilador de Windows 8, debe conocer este conjunto gratuito de iconos. Incluye 700 iconos bien decorados que se pueden usar libremente en proyectos de cualquier tipo.
06. Iconos modernos de la UI
Otro conjunto de iconos libres que se pueden usar al crear una interfaz de usuario software Para Windows o para Android / iOS. Al descargar este conjunto, recibirá 1000 planos, creados por manualmente, iconos, incluidos los iconos incluso para las cortinas de la aplicación en Windows Phone.
07. 350 Pixel Iconos perfectos
Un conjunto increíble de 350 iconos perfectamente claros para aplicaciones o sitios. Al mismo tiempo, se pueden cambiar de tamaño sin pérdida de calidad.
08. 80 mini iconos
80 iconos en miniatura perfectamente claros que pueden descargar tanto en formato PSD como en una fuente icónica. Estos iconos de PSD sociales y sofisticados son ideales para proyectos de cualquier tipo.
09. Icono web simple y práctico gráfico vectorial
Muchos iconos útiles que se pueden utilizar en proyectos personales y comerciales.
10. Iconos planos gratis
Un conjunto de iconos hechos en un estilo plano, entre los que puede seleccionar un calendario, correo electrónico, reloj, tarjetas y más.
11. Iconos mono
Un conjunto que incluye 108 iconos monocromos únicos hechos al estilo del minimalismo. Todos están disponibles en formato PNG con un tamaño de 32 a 32.
12. Metrizar los iconos
Colección de estilo metro gratuito, que se puede utilizar en sus propias aplicaciones y proyectos web. Los iconos de las redes sociales PSD son gratuitas tanto para uso personal como para uso comercial. El archivo contiene no solo los formatos PSD, SVG, ESP y AI, sino también fuentes web.
13. Iconos de la barra TAB IOS 7
Un elegante conjunto de iconos diseñados bajo la inspiración de IOS 7, que puede utilizar en sus propias aplicaciones. Puede descargar iconos en los siguientes formatos: PSD, AI y ESP.
14. Conjunto de iconos de Pika Chunky
Iconos de estilo Pika creados por la agencia de iconos holandeses de Dinamarca. Este kit incluye 42 iconos perfectamente claros.
15. icónico
Otro conjunto de iconos simples pero atractivos que son ideales para diseños minimalistas. Icónico es un conjunto de código abierto que se puede descargar en PNG, SVG, SWC y otros formatos, lo que le permitirá adaptarlos a sus propios diseños.
16. 44 tonos de iconos libres.
Conjunto de 44 iconos. Contiene los iconos PSD para el foro, que lo editará y los adaptará fácilmente a sus propios proyectos.
17. Conjunto de iconos de token
Token incluye 128 iconos únicos disponibles en formato de ICO de 16 a 16 píxeles, 32 píxeles y 256 píxeles, así como en formato PNG en la cantidad de 128 píxeles. Cada icono se representa en versiones oscuras y ligeras, y se complementa con un archivo PSD.
18. Iconos planos (PSD)
Iconos de estilo plano que se pueden descargar en formato PSD y editar en sus propias necesidades.
19. Conjunto de iconos gratis de 32px
Un conjunto en el que encontrará el icono PSD de cualquier destino: Skype, Facebook, Twitter, RSS, una taza de café, "como" y mucho más.
20. 48 iconos de diseño plano
Si eres un fan del minimalismo, entonces este conjunto te gustará exactamente. Consta de 48 iconos gratuitos que reflejan tareas de oficina, aspectos sociales, así como viajes. Todos ellos se presentan en formatos AI y PNG, y se pueden escalar sin pérdida de calidad.
21. Conjunto de iconos de Plex
El kit incluye más de 100 iconos, entre los cuales los calendarios, el antivirus, el reloj, correo electrónico, Aplicaciones Microsoft Office. , redes sociales, así como mucho más.
22. Vector mini libre
Un conjunto de más de 1000 iconos PSD desarrollados por el comando iCOJAM. Todos ellos también están en formato PNG. Son ideales para su uso en el desarrollo de un nuevo sitio, ya que pueden usarse gratis tanto en proyectos personales como comerciales.
23. ELDORADO MINI FREE
La próxima colección de mini iconos de Icojam, en la que se presentan más de 1200 iconos en la cantidad de 40 por 40 píxeles.
Los iconos que encontrará en estos recursos también se pueden usar para ilustrar información en la presentación de diapositivas, decorar cartas de negocios, Menú, volantes y otros.
Escribimos que los iconos en estos sitios son gratuitos, pero aún así le prestan atención a las condiciones de los relojes, ya que pueden cambiar en cualquier momento.
01. Revista Smashing
22. PIXELSMARKET.
26. BluGráfico.
BluGráficos: opciones PSD, PNG y iconos vectoriales. La búsqueda está limitada por las etiquetas, pero puede suscribirse al boletín y recibir semanalmente selección gratuita Por correo electrónico.
27. Icono de shock.
Icon Shock es miles de iconos libres para uso personal. Para aplicar una imagen en un proyecto comercial, debe realizar un pago de una sola vez.
28. Autor de CSS
El autor de CSS ofrece selecciones semanales de los mejores iconos web.
29. Cola creativa
¿Quieres iconos frescos? En la cola creativa hay conjuntos que ya no se encuentran en ninguna parte.
30. Descarga gratuita
Toda la descarga gratuita ofrece una ligera búsqueda y descargas directas PSD, PNG y vectores.
31. Iconos del ego
Ego Icons ofrece más de 1,500 iconos premium y 100 iconos de vectores gratis. Visite también las subsidiarias haciendo clic en los botones de panel de navegación superior.
32. Alienvalley
En Alienvalley, una amplia gama de iconos de alta calidad a cambio de su dirección de correo electrónico.
33. Dreamstale
DreamStale le proporcionará excelentes iconos premium gratuitos sujetos a las instrucciones de la autoría.
34. PAKFILES.
35. 1001 Descargas gratuitas
1001 Descargas gratuitas se especializa en iconos planos representados por muchas opciones excelentes y extrañas.
36. GraphicsBay.
37. Pixeden.
En Pixeden puedes buscar iconos en varios tamaños. Aquí hay una amplia selección de 16x16 a 512x512 en formato PNG.
38. Nombre.
NombreProjecto es una búsqueda conveniente, carga fácil y alta calidad Iconos. La referencia al autor es obligatorio. La membresía con una contribución mensual alivia las restricciones de descarga.
39. Iconmonstr.
IconMonstr ofrece iconos en varios tamaños sin una indicación de autoría.
40. FusionPlacial.
Diseño adaptativo - tema popular. Las pantallas han estado durante mucho tiempo fuera de los permisos estándar, y los sitios también pueden mirar el dispositivo con el tamaño de la palma y los monitores grandes. El sitio debe parecer igualmente bueno, independientemente del tamaño del dispositivo y la densidad de los píxeles. Para la adaptación del diseño y el contenido, hay muchas técnicas y tecnologías diferentes. Gráficos vectoriales, SVG, en mi opinión, uno de los temas más interesantes en esta dirección.
SVG Graphics es conveniente de usar para los iconos, mientras que no mirarán a los dispositivos con jabón con Retina y se pueden estirar sin pérdida de calidad.
Aquí, por ejemplo, un SVG-sprite en 4 tamaños diferentes, fuente - 32px:
SVG se enfría perfectamente con esta tarea y es adecuado para su uso en diseños adaptativos.
Los iconos para el diseño se pueden tomar de los conjuntos terminados o dibujar los suyos.
Conjuntos de iconos terminados
iconmelon.com.
Gran colección de iconos en diferentes temas. Los iconos cargados están invitados a insertar en HTML usando el uso.
icomoon.io.
Hermosa herramienta. No solo puede elegir y descargar los iconos listosizados, pero también puede descargar el suyo propio y obtenerlos en forma de fuente y / o sprite. Junto con el sprite, se propone cargar su versión PNG.
flaticon.com.
Gran colección, los iconos se dividen convenientemente en categorías. Los iconos seleccionados se pueden descargar en formatos separados (fuente, SVG, PNG) o en todos a la vez.
Dibujate
Para crear su conjunto de iconos, necesita un editor de vectores:
- Adobe Illustrator - En mi opinión, lo mejor. 599 RUB. / Mes como parte de la suscripción de la nube creativa;
- Inkscape - libre y no muy cómodo;
- Sketch - para Mac OS, $ 79.99. Tiene algunos problemas con la vectorización de los trazos, pero en general bastante cómodos.
Pérdida de peso
El archivo SVG terminado generalmente contiene un montón de superfluo, pero está bien optimizado. Los atributos innecesarios, los espacios y las transferencias se eliminan del código y el número de caracteres después de que el punto disminuye en los números. El peso del archivo disminuye en un 30-50%. Herramientas de optimización:
grunt-svgmin. - Tarea de gruñido usando svgo.. Al mismo tiempo, los archivos mismos tomarán de la carpeta de origen, optimizarán y se doblarán en la carpeta con los resultados. Muy cómodamente.
Sprit o Iconscript?
La fuente es una alternativa conveniente al sprite. No es necesario molestarse con una cuadrícula y una disposición de los iconos, es conveniente agregar nuevos personajes, aunque se requieren herramientas adicionales para esto.
Con la ayuda de una fuente, puede hacer que no solo los iconos de un fotón, sino también multicolor.
Esta fuente se puede hacer, por ejemplo, en el sitio web de icomoon.io/app/. Secuencia aproximada de acciones:
- Seleccione los iconos de marcar y / o descargar su propio.
- Haga clic en el botón de fuente a continuación.
- En este paso, puede reasignar caracteres para los iconos o descargar inmediatamente la fuente resultante.
Junto con la fuente en cuatro formatos (.woff, .svg, .ttf, .eot) se carga con CSS y un archivo demo.
Las fuentes incrustadas operan incluso en el 8º IE, pero al mismo tiempo tienen problemas inesperados con el apoyo en algunos navegadores modernos. Opera Mini no admite fuentes personalizadas, Firefox requiere hechizos para un servidor donde la fuente está acostada (resuelta usando BASE64), Chrome puede descargar la fuente si dejó la pestaña Abrir:
también en Chrome en Windows7, la página con fuentes incrustadas puede congelarse al abrir, y en algunos otros navegadores en lugar de los iconos puede haber cualquier cosa:
Desde el artículo del sistema de iconos de Chris Coir con SVG Sprites. De alguna manera vio los jeroglíficos en el mismo lugar, pero ahora hay SVG, por lo que no funcionará la pantalla. Los trucos de CSS, por cierto, usan muy activamente SVG en su nuevo diseño, y los desarrolladores de Codepen en el nuevo editor de diseño abandonaron el uso de las fuentes de iconos a favor de SVG.
A pesar de la conveniencia de uso, los problemas de soporte de fuentes en este momento Forzado a elegir a favor de los iconos en SVG.
Quiero esperar que en el futuro, las fuentes incrustadas sean mejor compatibles.
¿Cómo hay maneras de insertar SVG por página?
Duende
.icon (fondo-imagen: URL (Your.SVG);)Pros:
- código legible corto;
- la imagen está en caché;
Menos:
- solicitud al servidor;
- en los operadores antiguos, el fondo SVG se admite extraños: los problemas pueden surgir al agregar un marco a un elemento con un fondo SVG, y solo los fondos están operando en Opera Mini sin la cámara de vista;
- los iconos en spray no están disponibles para estilos de página;
- los sprites grandes pueden causar problemas de rendimiento.
BASE64 EN DATOS URI
.icon (fondo-imagen: URL (DATOS: Imagen / SVG + XML; BASE64, PHN2ZYB4BWXUCZ0AHR0CDOVL ...);)Pros:
- no hay solicitud al servidor.
- buen apoyo Navegadores: todo, excepto la ópera en Presto y Old IE.
Menos:
- la imagen no está en caché y cada vez que se prestaba de nuevo;
- línea larga en CSS;
- no legible: en el código no está claro que contiene;
- la imagen codificada puede pesar más fuente;
- para la codificación / decodificación, se necesitan herramientas adicionales;
- los iconos no están disponibles para estilos de página.