Jeg er sikker på at et vakkert sett med ikoner alltid vil komme godt med. Ikoner og ikoner, når de brukes riktig, er et svært verdifullt verktøy for en designer. De tiltrekker seg vår oppmerksomhet eller trekker oppmerksomheten til noe. For mange nettsidebrukere huskes funksjonalitet utelukkende visuelt, dvs. ved hjelp av bilder.
Denne samlingen av ikoner er utgitt for å hjelpe designeren. Samlingen er helt gratis. Vennligst les lisensavtalen før du bruker ikonene - lisensen kan endres fra tid til annen. Ikoner kan også være nyttige for bedriftsprosjekter, blogger, nettmagasiner, dagbøker og Internett-applikasjoner. Kom gjerne med forslag til dine egne ikonsett i kommentarene til dette innlegget.
Ikoner for webapplikasjoner.
Chalkwork HTML er et gratis sett med HTML-temaikoner. De passer perfekt til hele Chalkwork-familien av ikoner. Du kan installere disse ikonene helt gratis for personlige og kommersielle formål. Settet er tilgjengelig i 3 størrelser og 6 formater: transparent PNG, TIF, GIF, BMP, ICO Windows og Mac ICNS.
Hvordan lage en nettside selv?
Håndpekerikoner.
Gratis ikoner som inkluderer 36 pekende hender, 6 forskjellige typer med 6 fargealternativer. Det finnes også en kildefil i .psd-format.
452 ikoner fritt tilgjengelig for privat og kommersiell bruk.
Grunnleggende utstyr.
42 høykvalitetsikoner i 64×64, 32×32×16 og 16 størrelser. Mac OS, Win og .PNG-formater. Mac OS, Win osv. PNG-format.
Denne gratis ikonpakken er beregnet for bruk i personlige og kommersielle prosjekter, og bør brukes uten attribusjon. Settet kan ikke omfordeles. Settet inneholder 26 stilige ikoner designet av Midtone Design Studio. Hvert ikon er en .PNG 48 × 48px. Merkene ble laget av designeren Jonatan Castro Fernandez.
Filstatusikonsettet inneholder 16 ikoner som kan brukes for nettapplikasjoner.
Dansk royaltyfri.
Design: Jonas Rask.
Onebit Set-ikoner.
80 vakre ikoner i 48 × 48 px oppløsning. PNG.
Last ned også del 1.
På scenen ikoner satt.
Settet inneholder 49 gratis vektorikoner, inkludert PSD, som kan være nyttige for bedrifts- og personlige prosjekter. Du kan bruke settet gratis, uten noen begrensninger. Ikoner er tilgjengelige i PNG-format med en oppløsning på 128 × 128 piksler. Også inkludert er ikoner i .PSD-format.
Dette settet inneholder 9 nettleserikoner i 64×64, 32 og 32×16×16 piksler. Inkluderer store nettlesere som Mozilla Firefox, Internet Explorer, Opera, Google, Chrome og mange andre.
Melkeaktige ikoner sett.
Settet inneholder 131 ikoner, for det meste grønne, som har et veldig fint utseende for den mørke bakgrunnen.
Mark James (FamFamFam) har laget et stort sett med 1022 silkemyke 16×16 ikoner i PNG-format.
I den fjerde delen av "coquettes" ble ytterligere 50 ikoner lagt til. Hovedformålet med disse ikonene er å legge til kjærlighet og lekenhet til prosjektene dine. Ikoner i følgende størrelser: 16 × 16px, 32 × 32px, 48 × 48px, 64 × 64px og 128 × 128px og 32-biters gjennomsiktig PNG-filformat.
Del 5 "coquette" inneholder 50 ikoner av høy kvalitet. Dimensjoner: 16 × 16px, 32 × 32px, 48 × 48px, 64 × 64px og 128 × 128px og 32-biters transparent PNG-filformat.
Ikoner for e-handel (elektronisk handel).
Chalkwork-betalinger er tilgjengelig i 3 størrelser og 6 formater: transparent PNG, TIF, GIF, BMP, ICO Windows og Mac ICNS.
Ikonene er gratis for personlig bruk og også gratis for kommersiell bruk, men designere krever lenker på nettsiden. Arkivet inneholder ikonene i alle størrelser, Windows, Mac og PNG-formater. Arkivet inneholder ikoner i alle størrelser, Windows, Mac og PNG-formater.
23 gratis kredittkortikoner for gratis nedlasting.
Sett med friske ikoner.
Dette settet inneholder 59 raster- og vektorikoner. Settet inneholder ikoner i PNG-, ICO- og ICNS-formater. En EPS-vektorfil er også tilgjengelig.
Nyttige ikonsett.
Et sett med gratis multimedievektorikoner i forskjellige farger og stiler.
Fortune 500-merker.
Over 200 kjente merkeikoner, inkludert PSD.
Et sett med 50 passasjer- og fotgjengersymboler designet av AIGA er nå tilgjengelig gratis online. Det finnes EPS- og GIF-formater.
Lydikoner.
Et lite sett med 48 × 48px-ikoner: M-Box, på M-Audio Axiom 25 Midi-keyboard og monitor TAPCO S5-høyttalere. Disse ikonene er gratis for personlig bruk. Tilgjengelig i .ICNS, .PNG.
Sosiale ikonsett.
Sosiale medier mini-ikonpakke.
Dette settet består av 30 (16×16) findesignede sosiale medier mini-ikoner. De kan fritt brukes til ikke-kommersielle formål.
Sosiale ikoner i form av skyer. Format.PNG.
Hvordan lage en nettside selv?
Hvilke teknologier og kunnskap trengs i dag for å lage nettsider på egenhånd? Finn ut på intensiven!
Settet inneholder 16 sosiale ikoner (gjennomsiktig) PNG-format.
Disse ikonene inneholder Facebook, Blinklist, Feedburner, Flickr, FriendFeed, Furl, Gmail, Google, Heart icon, Last FM, Linked IN, Magnolia, Newsvine, PayPal, Skype, Sphinn, Twitter, Vimeo, Yahoo og You Tube. Alle ikoner er tilgjengelige i fire størrelser: 16 × 16, 32 × 32, 64 og 64 × 12 × 128 piksler. Og de er alle gratis.
Hvert ikon er i . JPG og kommer i to størrelser: 48×48px og 96×96px. Hvert ikon er mørkegrå på en hvit bakgrunn.
Dette settet inneholder ikoner for Blip.fm, Digg, Facebook, Firefox, Flickr, Meneame, Myspace, Technorati, Twitter, Vimeo, WordPress, Youtube, LastFM, RSS, Blogger, GMail, Reddit og StumbleUpon. Ikoner er tilgjengelige i størrelsene 24×24, 32×32, 48 og 48×64×64. Utgitt under en Creative Commons-lisens.
Sirkulære sosiale ikoner.
ZIP-filen inneholder 3 størrelser for 17 ikoner: 128 × 128px, 64 × 64px og 32 × 32px. Det er et ikon for følgende: Blogger, Delicious, DesignFloat, Digg, Facebook, Flickr, Google, et hjerteikon som fungerer for alt (som bokmerke), MySpace, Reddit, et RSS-ikon, StumbleUpon, Technorati, Twitter, WordPress, Yahoo! Designet av Eli Burford fra Australia.
Vakre sett med ikoner.
Mail stil.
Poseikonsamlingen ble designet av Paul Kadysz. Den inneholder 5 høykvalitetsikoner. Denne gangen har vi 3 forskjellige formater (.ico, .icns og .png) og 6 størrelser! 512px-16px (unntatt .png). 512px-16px (unntatt PNG). Slik ser settet ut.
350 gratis vakre skrivebordsikoner, kan også brukes online. Design av mester David Lanham.
30 gratis ikoner som har størrelser: 256 × 256, 128 × 128, 64 × 64, 48 × 48, 32 × 32, 24 × 24, 16 × 16 piksler og PNG-, ICO- og icns-formater.
Ikon design for gratis nedlasting.
Settet inneholder 18 vakre ikoner relatert til prosjektledelse. Settet inneholder ikoner for adressekart, søylediagram, kalender, klokke og tid, konferanseenhet, kontakter, dokumenter, prosjekter, søk, nettstedskart, etc. Helt gratis. Bruk til ethvert formål.
Nyttig sett med vektorikoner (256 × 256 piksler). Den inneholder bøker, pensler, pasteller, klipp, fargeblyanter, dokument, viskelær, notisblokk, palett, saks.
Responsiv design er et populært tema. Skjermer har lenge gått utover standardoppløsninger, og nettsider kan sees på både enheter i håndflate og store skjermer. Nettstedet skal se like bra ut uavhengig av enhetsstørrelse og pikseltetthet. Det finnes mange forskjellige teknikker og teknologier for å tilpasse design og innhold. Vektorgrafikk, SVG, er etter min mening et av de mest interessante temaene i denne retningen.
SVG-grafikk er praktisk å bruke for ikoner, de vil ikke se såpeglatte ut på netthinneenheter og kan strekkes uten å miste kvalitet.
Her er for eksempel en SVG sprite i 4 forskjellige størrelser, den originale er 32px:
SVG gjør denne jobben godt og egner seg godt for bruk i responsive oppsett.
Du kan ta ikoner for design fra ferdige sett eller tegne dine egne.
Sett med ferdige ikoner
iconmelon.com
Stor samling av ikoner om ulike emner. Lastede ikoner foreslås satt inn i HTML ved å bruke bruk .
icomoon.io
Det mest praktiske verktøyet. Du kan ikke bare velge og laste ned ferdige ikoner, men du kan også laste opp dine egne og få dem i form av en font og/eller sprite. Sammen med sprite tilbys du å laste ned PNG-versjonen.
flaticon.com
Stor samling, ikoner er praktisk delt inn i kategorier. Valgte ikoner kan lastes ned i individuelle formater (font, SVG, PNG) eller alle samtidig.
Vi tegner selv
For å lage ditt eget sett med ikoner trenger du et vektorredigeringsprogram:
Adobe Illustrator er best etter min mening. 599 RUB/måned som en del av et Creative Cloud-abonnement;
Inkscape er gratis og lite brukervennlig;
Sketch - for Mac OS, $79,99. Har noen problemer med vektorisering av slag, men generelt ganske praktisk.
Vekttap
Den ferdige SVG-filen inneholder vanligvis mye unødvendig, men egner seg samtidig godt til optimalisering. Unødvendige attributter, mellomrom og bindestreker fjernes fra koden, og antall tegn etter punktum i tall reduseres. Filvekten reduseres med 30-50 %. Optimaliseringsverktøy:
grynt-svgmin- oppgave for Grunt ved hjelp av svgo. I dette tilfellet vil selve filene bli hentet fra kildemappen, optimalisert og lagret i resultatmappen. Veldig praktisk.
Sprite eller ikonskrift?
Fonten er et praktisk alternativ til sprite. Det er ikke nødvendig å bry seg med rutenettet og arrangementet av ikoner, det er praktisk å legge til nye symboler, selv om dette krever ekstra verktøy.
Ved å bruke en font kan du lage ikke bare enfargede ikoner, men også flerfargede.
Du kan lage din egen font, for eksempel på nettstedet icomoon.io/app/. Omtrentlig rekkefølge av handlinger:
Velg ikoner fra et sett og/eller last opp dine egne.
Klikk på Font-knappen nedenfor.
På dette trinnet kan du tilordne symboler på nytt for ikoner eller umiddelbart laste ned den resulterende fonten.
Sammen med fonten i fire formater (.woff, .svg, .ttf, .eot), lastes CSS og en demofil ned.
Innebygde fonter fungerer selv i IE 8, men har uventede støtteproblemer i noen moderne nettlesere. Opera Mini støtter ikke egendefinerte fonter i det hele tatt, Firefox krever staver for serveren der fonten er plassert (løst ved hjelp av base64), Chrome kan laste ut fonten hvis du lar fanen være åpen i lang tid:
I Chrome på Windows7 kan også en side med innebygde skrifttyper fryse når de åpnes, og i noen andre nettlesere kan alt vises i stedet for ikoner:
Bilde fra Chris Cohers artikkel Icon System with SVG Sprites. Jeg så en gang hieroglyfer på samme sted, men nå er de SVG, så jeg kan ikke lage et skjermbilde. CSS-triks bruker forresten SVG veldig aktivt i sitt nye design, og Codepen-utviklerne i det nye editordesignet forlot bruken av ikonfonter til fordel for SVG.
Til tross for brukervennligheten, tvinger problemer med skriftstøtte oss for øyeblikket til å velge SVG-ikoner.
Jeg vil gjerne håpe at innebygde fonter vil bli bedre støttet i fremtiden.
Hva er de forskjellige måtene å sette inn SVG på en side?
Sprite
.icon ( bakgrunnsbilde: url(din.svg); )
Fordeler:
kort lesbar kode;
bildet er bufret;
Ulemper:
forespørsel til serveren;
i eldre operaer er SVG-støtte i bakgrunnen merkelig: problemer kan oppstå når du legger til en ramme til et element med SVG-bakgrunn, og i Opera Mini fungerer bare bakgrunner uten viewBox;
ikoner i spriten er ikke tilgjengelige for sidestiler;