Anastasia Ovchinnikova

Seuraa

– Apr 5, 2020 · 13 min lue

Kuvakkeet on merkittävä rooli antaa sinulle ensivaikutelman sivuston tai sovelluksen käyttöliittymä. Niiden kehittäminen tyhjästä vaatii kuitenkin paljon aikaa ja rahaa., Käyttämällä kuvakkeet sivuston avulla voit tehokkaasti kommunikoida kävijöitä: he lisätä luettavuutta, korostaa tärkeää sisältöä, uudelleen valvoa toimintoja tai ominaisuuksia ja parantaa suunnittelun. Siksi kannattaa kiinnittää huomiota valmiisiin parhaisiin ikonipakkauksiin.

Myös, kun se tulee ikoni suunnittelu, tämä on loistava tapa esitellä suunnittelijan pätevyys., Makea, mukava icon pack on täydellinen näyteikkuna suunnittelijan työtä ja tehokas väline rakentaa mainetta verkossa.

tässä muutamia hyviä puolia kuvakkeiden käytöstä seuraavassa UX-suunnitteluprojektissa.

  • kuvakkeet auttavat lisäämään sivuston tai sovelluksen luettavuutta.
  • hyvin tehdyt kuvakkeet auttavat vähentämään tekstin määrää. Kuvakkeiden käyttäminen tekee viestistäsi ymmärrettävän ilman tekstiä.
  • kuvakkeet voivat lisätä personoinnin tuotteeseesi.
  • kuvakkeet voivat olla hyvä lähtökohta tuotteen tutustumisessa.,
  • Viime, mutta ei vähäisimpänä: yksi tärkeimmistä toiminnot kuvakkeet on auttaa käyttäjiä intuitiivisesti ymmärtää hakemus sekä ensimmäisessä tuttavuus ja myöhemmän käytön aikana.

tässä artikkelissa, löydät kokoelma joitakin parhaista kuvake pakkauksissa voit käyttää sivuston tai liiketoimintaa, vaikka et ole luova taiteilija. Tässä artikkelissa esitettyjä tuotteita voidaan käyttää yhteisten verkkosivustojen lisäksi perustapauksissa myös monimutkaisemmissa ja erikoistuneemmissa tuotteissa.

jaamme tuotteet helppoutesi vuoksi useisiin kategorioihin., Ennen kuvauksia näet luokkaan tämä tuote kuuluu.

  • Vapaakuvakejoukot.
  • toreilla. Torilla on eri valmistajien kuvakkeita. Täältä löydät sekä halpoja että kalliita sekä hyviä ja huonolaatuisia tuotteita.
  • materiaalisuunnittelun kuvakesarjat ja litteät kuvasarjat.
  • CSS-kuvasarjat. CSS kuvakkeet tehdään käyttäen-arvaa mitä-CSS. Jos haluat käyttää niitä, kopioi koodi sivuillesi.
  • kuvakkeiden fontit. Pluralsightin mukaan kuvakefontit ovat varsinaisia fontteja, jotka sisältävät kirjainten tai numeroiden sijaan symboleita ja glyfejä., Ne ovat suosittuja web suunnittelijat, koska voit tyylitellä niitä CSS samalla tavalla kuin säännöllinen teksti. Icon-fontteja käsitellään tekstinä selaimilla, joten sinun täytyy normalisoida ne välttääksesi tekstin aliasointia koskevat ongelmat, ja niitä tuetaan lähes kaikissa selaimissa.
  • SVG-ikonit. Scalable Vector Graphics (SVG) on XML-pohjainen vektorigrafiikka-muodossa, joka voidaan skaalata mihin tahansa kokoon menettämättä selkeyttä. Ne voidaan näyttää käyttämällä CSS -, esine-tunnisteet, kuvan tunnisteet tai sisältöön suoraan HTML.
  • Glyph – ja piktogrammikuvasarjat.,

Flaticon

Kuvan lähde: https://www.flaticon.com/packs

Flaticon sisältää täysin muokattavissa vektoreita ja voidaan käyttää sekä henkilökohtaisia ja kaupallisia hankkeita. FlatIcon on yli 2,3 miljoonaa vektori kuvakkeet on ryhmitelty 51202 pakkauksissa.

tuotteessa on Adobe Extension, jonka avulla voit helposti tuoda kuvakkeita Photoshopissa, Illustratorissa ja tehosteiden jälkeen., Jos haluat käyttää web-fonttia staattisten tiedostojen sijaan kuvakkeissa, FlatIcon huolehtii formaatin muuntamisesta ja luo web-fontin käyttövalmiiksi. Voit myös muokata ladattuja kuvakkeita.

– Näppäintä faktat:

  • yli 90 000 kuvakkeet;
  • SVG, EPS, PSD, ja PNG;
  • – kuvake fontit;
  • Adobe Extension CC suite;
  • Linkshare lisenssin premium vaihtoehtoja; ja
  • uusi kuvake pakkauksissa lisätään joka kuukausi.,

premium tilauksen kanssa FlatIcon antaa sinulle täyden lisensointi oikeudet, pääsy eksklusiivista sisältöä, ei mainoksia, MacOS sovellus ja Adobe extensions, sekä kyky luoda rajattomasti kokoelmia.,

Jam Icons

Web-site: https://jam-icons.com/
Format and Type: SVG, CSS
Price and License: Free, MIT

Image source: https://jam-icons.com/

Jam icons are a set of 896 handcrafted icons. This icon pack comes with both SVG and font versions. The icons can be used as SVG files in your web, print or application development projects., Kuvakkeita voidaan käyttää myös kirjasimena annetuilla CSS-tyyleillä. Kokoja on 16px, 24px ja 32px. Voit myös valita täyttää tai aivohalvaus kuvakkeet.

Fontisto Kuvake Pakkaus

Web-sivusto: https://fontisto.com/
Muoto ja Tyyppi: CSS
Hinta ja Lisenssi: Ilmaiseksi, MIT

Kuvan lähde: https://fontisto.com/

Fontisto on vektori kuvakkeet pack., Kuvakkeet voidaan heti räätälöidä: koko, väri, Pudota varjo ja kaikki, mitä voidaan tehdä CSS: n voimalla. Tuote ei vaadi JavaScriptiä. Fontisto-kuvakkeet ovat vektoreita, eli ne näyttävät hyvältä korkean resoluution monitoreissa.

sivustolta löytyy täydellinen dokumentaatio ja erilaisia oppaita tuotteen käynnistämisestä ja muokkaamisesta. Voit alkaa käyttää tuotetta yksinkertaisesti liittämällä linkin sivustossasi. Lisäksi voit käyttää Fontisto paketti johtajat, jotka ovat sinulle: npm, lanka, bower, jne.,

Iconmonstr

Web-sivusto: https://iconmonstr.com/
Muoto ja Tyyppi: SVG, EPS, PSD ja PNG, Markkinapaikka
Hinta ja Lisenssi: Ilmainen

Kuvan lähde: https://iconmonstr.com/

Iconmonstr on kokoelma kuvakkeet on 4400+ kuvakkeet. Jokainen kuvakejoukko tarjoaa grafiikan sekä ääriviivat että täytetyt versiot varmistaakseen, että niitä voidaan käyttää erilaisiin suunnittelusovelluksiin., Jokainen tämän sivuston kuvake on saatavilla ilmaiseksi, ja kuvaketiedostot tulevat sellaisissa muodoissa kuin SVG, AI, PSD ja PNG. Tiedostoja voidaan käyttää vapaisiin ja kaupallisiin tarkoituksiin.

Iconmonstr tekee kuvakkeiden etsimisestä helppoa voimakkaan hakutoimintonsa kautta. Voit jopa tallentaa suosikki kuvakkeet henkilökohtainen kokoelma tulevaan käyttöön.

tärkeimmät ominaisuudet:

  • vapaa käyttö kaikki kuvakkeet,
  • neljä-muodossa lataa vaihtoehtoja, ja
  • pienennetty kuvakkeet optimoitu web-käyttöön.,

Pixsellz Materiaali Kuvakkeet Kirjasto

Kuvan lähde: https://icons.pixsellz.io/

valtava nippu yli 1000 kuvakkeet jaettu 16 eri luokkiin. Free icon pack on inspiroitunut materiaalin suunnittelusta ja esitetty kolmeen eri visuaaliseen tyyliin-pyöristetty, ääriviivat ja kaksisävyinen., Sarja on saatavilla 6 eri tiedostomuodossa, joten voit käyttää kuvakkeita haluamassasi suunnitteluohjelmistossa.

tärkeimmät ominaisuudet:

  • 3 tyylejä,
  • Figma tyylejä,
  • 1000+ kuvakkeet,
  • 24 x 24 pikseliä,
  • Luonnos tyylejä ja symboleja,
  • 16 luokat, ja
  • 6 tiedostomuotoja.

Entypo

Web-sivusto: http://www.entypo.com/
Muoto ja Tyyppi: SVG
Hinta ja Lisenssi: Ilmaiseksi, Luova Yhteinen Lisenssi 4.,0

Kuvan lähde: http://www.entypo.com/

Entypo on svg kuvake family pack, huolella muutama vuosi sitten Daniel Bruce Ruotsissa. Nämä kuvakkeet ovat loistavia: mitä tulee vapaisiin, ne ovat huippuluokkaa. Tuote tulee SVG: nä 411 kuvakkeella, ilmaiseksi Creative Commons-lisenssillä.,

kirjoittajan mukaan fontin rakentaminen vie paljon aikaa ja on parempi käyttää aikaa uusien kuvamerkkien kehittämiseen.

Paha Kuvakkeet

Web-sivusto: https://evil-icons.io/
Muoto ja Tyyppi: SVG, Luonnos
Hinta ja Lisenssi: Ilmaiseksi, MIT

Kuvan lähde: https://evil-icons.io/

Tämä pakkaus on todella massiivinen ja se sisältää kaiken — mukaan lukien SVGs ja alkuperäinen lähde tiedostoja., Tämä tarkoittaa, että voit ladata SVGs sekä tiedostoja Illustrator ja .luonnostiedostot Sketchille.

jokainen ikoni noudattaa ohuen linjan tyyliä ja ne ovat täydellisiä useimmille verkkosivustoille. Se, että voit muokata alkuperäistä lähdettä, tekee niistä vielä arvokkaampia.,

Streamline Icons

Web-site: https://streamlineicons.com/
Format and Type: ICONJAR, SKETCH, FIG, XD, SVG, AI, PDF, PNG
Price and License: Free to $411

Image source: https://streamlineicons.com/

Streamline Icons is another nice and adaptable free icon pack on the web market. The tool is organized in 53 categories with over 30000 vector icons.,

Tämä on yksi harvoista kuvake pakkauksissa optimoitu Luonnos, joten se on helppo manipuloida aivohalvaus leveydet ja värit. Sisäänrakennettu luonnos ominaisuuksia, kuten symbolit ja jaettu tyylejä tekevät uudelleenkäyttö elementtejä, kuten kuvakkeet, nopea ja helppo prosessi.

yhtiöllä on oma verkkosovellus, joka auttaa selaamaan, etsimään ja lataamaan kuvakkeita suoraan selaimesta.,

tärkeimmät ominaisuudet:

  • yli 30000 vektori kuvakkeet järjestetty;
  • Smart Aivohalvauksia muuttaa ääriviivat paksuus;
  • Luonnos, AI, EPS, PDF, PNG, SVG-tiedostomuodoissa;
  • web-sovellus etsiä ja muokata kuvakkeet;
  • jokainen kuvaketta Tehostaa 3.0 on kolme ainutlaatuista painot: kevyt, säännöllinen ja rohkea.,

Smashicons

Web-sivusto: https://smashicons.com/
Muoto ja Tyyppi: JAR -, SVG, AI, LUONNOS, Markkinapaikka
Hinta ja Lisenssi: Ilmainen $149

Kuvan lähde: https://smashicons.com/

Smashicons tarjoaa kattavan kokoelma kuvakkeet yli 219000+ kuvakkeet niiden library. Smashicons toimii hieman eri tavalla kuin muut: niiden hinnoittelu perustuu kuukausittaiseen suunnitelmaan $5/kk., Tämä tarkoittaa, että $5 kuukaudessa saat pääsyn koko kokoelma olemassa olevia kuvakkeita sekä tulevia kuvakkeet he julkaisevat.

tärkeimmät ominaisuudet:

  • erittäin suuri kokoelma kuvakkeet,
  • kaikki kuvakkeet ovat multi-platform yhteensopivia,
  • helppo käyttää web-sovellus etsiä ja löytää kuvakkeet tarvitset,
  • tilaus-pohjainen liiketoimintamalli,
  • multiplatform tuki.

Icons8

Web-sivusto: https://icons8.com/
Muoto ja Tyyppi: SVG, PNG, PDF
Lisenssi ja Hinnoittelu: Hyvä Poika Lisenssi, Ilmainen 19.,90 euroa kuukaudessa

Kuvan lähde: https://icons8.com/

icon set Icons8 mukana yli 120000 kuvakkeet, jotka kattavat useita luokkia; liike-ja toimisto-asetukset ihmiset, ruoka, ja sosiaalisen median kuvakkeet. Kuvakkeet on suunniteltu jäljittelemään tietyn käyttöjärjestelmän ilmettä. Voit ladata ne Windows -, iOS-ja Android-versioissa.,

kuvakkeet toimivat Sketchillä, Photoshopilla ja Xcodella. Voit käyttää verkkoeditoria ennen kuvakkeiden lataamista järjestelmääsi.

tärkeimmät ominaisuudet:

  • SVG, PNG ja HTML-muodossa;
  • kuvakkeet saatavilla eri tyylejä, kuten linja-kuvake, täynnä ikoni, ja täysi väri;
  • kaikki kuvakkeet voi ladata kautta .zip-tiedosto;
  • muokkaa ennen lataamista;
  • sekä maksuttomia että maksullisia tilausvaihtoehtoja.,

Icomoon

Web-site: https://icomoon.io/
Format and Type: SVG, PNG, PDF
License and Pricing: Free to $139 per month

Image source: https://icomoon.io/

Icomoon comes as a complete tool for iconography and icon management. The product has a high-quality solution for editing and managing icons., Icomoon-kuvakkeet on käsityönä tehty 16×16-verkkoon ja ne ovat saatavilla SVG -, EPS -, PSD -, PDF-ja AI-muodoissa. Myös sen luojat päivittävät kuvasarjaa jatkuvasti.

jokaisessa kuvakepaketissa on yksityiskohtainen lisensointi, jotta suunnittelijat ja kehittäjät tietävät tarkalleen, miten kuvakkeita voidaan käyttää. Käyttäjät voivat myös tehdä omia mukautettuja kuvakkeita fontteja.

tärkeimmät ominaisuudet:

  • kattava kuvake hallinnan työkalut
  • ilmaisia ja maksullisia lataa vaihtoehtoja,
  • laaja valikoima ladattavaksi formaatteja,
  • ilmainen ja helppo päivitykset.,

Glyphish Kuvake Pakkaus

Kuvan lähde: http://www.glyphish.com/

Glyphish tarjoaa erilaisia kuvake pakkauksissa. Jokainen pakkaus tulee eri muodoissa, kuten PNG, SVG, PSD ja AI. Basic icon pack on saatavilla $25, kun taas ultimate one on saatavilla säännölliseen hintaan $99. Ilmainen demo sisältää 50 ikonia. Suunnittelijat voivat helposti muokata kaikkia kuvakkeita.,

tärkeimmät ominaisuudet:

  • kuvakkeet useista alustoille: iOS, Android, Web, Windows;
  • joukko 50 vapaa kuvakkeet;
  • helppo vedä-ja-pudota Xcode;
  • kuvakkeet, jotka on erityisesti kokoinen Apple Retina näytöt.,

Ionicons

Web-sivusto: https://ionicons.com/
Muoto ja Tyyppi: SVG ja Webfont, Kuvake font
Lisenssi: MIT

Kuvan lähde: https://ionicons.com/

Ionic joukkue päätti vapauttaa niiden kuvakkeet kuin webfont kutsutaan Ionicons. Luonnollisesti ne ovat täysin ilmaisia ja saatavilla GitHub. Voit jopa lisätä nämä kuvakkeet suoraan sivustoosi käyttämällä CDN-versio stylesheet., Se tukee täysin SVG-ja web-fontteja.

tärkeimmät ominaisuudet:

  • täysin ilmainen,
  • helppo käyttöönotto kopioimalla ja liittämällä linkin,
  • tulee kuin webfont,
  • räätälöityjä kokoja,
  • yli 1100 kohteita.

Kulmikas Materiaali Kuvakkeet

Kuvan lähde: https://material.io/resources/icons/?style=baseline

Materiaali Kuvake on ilmainen kuvake pakkaus Google., Luettavuuden ja selkeyden varmistamiseksi nämä kuvakkeet on optimoitu näyttämään hyvältä kaikilla alustoilla ja näytöillä. Nämä materiaali kuvakkeet ovat täysin vapaa ja saatavilla GitHub. Tämä kuvake paketti on täysin massiivinen yli 1000 kuvakkeet kattavat laajan valikoiman käyttöliittymän ominaisuuksia.

kaikki symbolit ovat saatavilla viidessä teemassa. Saat valikoiman ladattavia kokoja ja tiheyksiä. Web-projektien paras muoto on helppokäyttöinen icon web-fontti.,

Linearicons

Kuvan lähde: https://linearicons.com/

Lineaarinen Ikoni pack on yksi suosituimmista ja paras kuvake pakkauksissa henkilökohtaiseen tai kaupallisiin tarkoituksiin. Linear icon pack on sekä ilmainen että premium-versio. Tämän amazing icon Packin ilmainen versio on Creative Common license-lisenssillä. On myös erilaisia paketteja, jotka voit valita tarpeisiisi, kuten Työpöytäpaketti.,

Key features:

  • CloudFront CDN;
  • free version available;
  • comes with different formats: SVG, PDF, Webfont.

Feathericons

Web-site: https://feathericons.com/
Format and Type: SVG, Webfont, Iconfont
License and Pricing: Free, MIT License

Image source: https://feathericons.com/

Feather is one of the most popular open-source icon sets., Nämä ovat avoimen lähdekoodin kuvakkeita, jotka on suunniteltu 24×24-verkkoon. Kuvakkeet ovat saatavilla SVG-muodossa. Se on MIT-lisenssin alla, ja avoimen lähdekoodin kuvakkeita on noin 250.

kuvakkeita on helppo muokata, puhdistaa ja raikastaa — koosta riippumatta. Ne suunniteltiin ensin kuvakefonttiksi, joten se on tarkoitettu upotettavaksi web-fonttiksi.,

Iconfinder

Web-site: https://www.iconfinder.com/
Format: SVG, PNG, ICO, Marketplace
License and Pricing: From $9 to $49 per month

Image source: https://www.iconfinder.com/

Iconfinder is one of the most popular icon resources on the net. It offers over 4 million icons, providing users with a variety of search options including icon format, price, size, background, etc., Kuukausimaksusuunnitelmia on useita-9 dollarista 49 dollariin. Voit myös valita ”pay as you go” – järjestelmän.

– Kuvake tiedostot ovat saatavilla SVG, PNG, ICO, ICNS, ja Adobe Illustrator-muodossa, ja mitat vaihtelevat välillä 16×16 512×512. Voit myös työskennellä joidenkin sivuston parhaiden suunnittelijoiden kanssa, jos et löydä jotain, mistä pidät tai haluat vain mukautettuja kuvakkeita, jotka on suunniteltu erityisesti sinulle ja brändillesi.,

tärkeimmät ominaisuudet:

  • sekä ilmaisia ja maksullisia käyttää vaihtoehtoja,
  • joustava haku ominaisuudet,
  • kuvakkeet saatavilla eri muodoissa,
  • paljon luokkia ja tyylejä,
  • icon editor.

Substantiivi Hanke

Kuvan lähde: https://thenounproject.com/

Substantiivi Hanke tarjoaa yhden suurimmista kuvake kirjastot saatavilla verkossa., Suurin osa tämän sivuston kuvakkeista on saatavilla SVG – ja PNG-formaateissa sekä mustavalkoisissa tyyleissä.

sivuston kirjasto koostuu erilaisten itsenäisten suunnittelijoiden suunnittelemista kuvaketiedostoista. Se on paikka, jossa luojat ja luovan alan ammattilaiset voivat tehdä yhteistyötä myydäkseen mallejaan ja löytääkseen loputtoman kirjaston premium-kuvakkeita.

tämän valtavan ja kattavan kuvakirjaston etsiminen on erittäin helppoa. Muita keskeisiä ominaisuuksia tämän kuvaketta kirjasto ovat sekä ilmainen ja premium lataus vaihtoehtoja, monet suuret kuvakkeet, sovellus Mac ja enemmän., Tämä kuvakirjasto päivitetään säännöllisesti, ja uusia kuvakkeita ja sarjoja lähetetään päivittäin.

tärkeimmät ominaisuudet:

  • yli 150 000 kuvakkeet;
  • SVG, PNG;
  • haku ja löytö työkaluja;
  • Creative Yhteisen Lisenssin premium vaihtoehtoja;
  • ilmaisia ja maksullisia lataa vaihtoehtoja;
  • uusi kuvakkeet ladataan lähes päivittäin.

Fontawesome Kuvakkeet

Web-sivusto: https://fontawesome.com/icons
Muoto ja Tyyppi: SVG, PNG, Kuvake font, Markkinapaikka
Lisenssi ja Hinnoittelu: SIL OFL 1.,1

Kuvan lähde: https://fontawesome.com/icons

Font Awesome on eniten käytetty ja suosituin kuvake fonttia noin. Se on myös Bootstrapin joukkueelle asetettu oletuskuvake. Se on saatavilla myös SVG-kuvakkeina muiden formaattien joukossa.Lisenssi on avoin ja ilmainen mihin tahansa, kaupalliseen tai henkilökohtaiseen.

jokainen kuvake on täysin skaalattavissa ja saatavissa suoraan CSS: ssä., Voit vaihtaa värejä, varjoja, taustagradientteja ja kaikkea muuta käyttämällä puhdasta CSS3: ta. Toinen syy käyttää tätä kirjastoa on, että se on täysin optimoitu ja ei ole yhteensopivuusongelmia, koska se ei vaadi JavaScript ollenkaan.

tärkeimmät ominaisuudet:

  • Vektori Fontti,
  • jokainen kuvake tulee CSS-Luokka & Unicode
  • ilmainen
  • rakennettu helppokäyttöisyys mielessä,
  • ominaisuudet helppo päivittäminen eri sivustot,
  • tarjoaa työpöydän huijata arkin koko-kuvaketta kirjasto.,

Lineicons

Web-sivusto: https://lineicons.com/
Muoto ja Tyyppi: SVG, Web font, Ikoni fontti
Lisenssi ja Hinnoittelu: Ilmainen

Kuvan lähde: https://lineicons.com/

LineIcons myös tarjota ilmainen CDN selkeä dokumentaatio, joka tekee se helppo päästä alkuun.

tämä kuvakepaketti on täysin ilmainen ja siinä on 450+ viivakuvaketta., Se kattaa jokaisen olennaisen ikonin, jota tarvitset projektiin eri kategorioista. LineIcons tarjoaa myös ilmaisen CDN: n ja selkeän dokumentaation, jotta pääset helposti alkuun. Siinä on 2 erilaista skaalautuvaa pakettia-WebFonts ja SVG-tiedostoja, joita voit käyttää projektin tarpeista riippuen.

keskeiset ominaisuudet:

  • 450+ Ilmaiset kuvakkeet,
  • VG-tiedostot,

  • Web-kirjasin valmis,
  • vapaa CDN.,

Lopullinen Ajatuksia

oikean icon library resource projektin pitäisi olla sen perusteella, mitä pidetään kaikkein suosittu, vaan siitä, mikä parhaiten sopii tarpeisiin projektin. Kun valitset kuvakkeita, kiinnitä huomiota siihen, kuinka helppoa on aloittaa projekti, mitkä formaatit ovat läsnä kirjastossa ja hinta.

myös tärkeä tekijä kuvakepakkauksen valinnassa vastaa sovelluksesi tai sivustosi tyyliä.

toivomme, että tämä artikkeli auttaa sinua valitsemaan sopivimman ratkaisun tarpeisiisi.