Beautiful icon sets
Hello, dear subscriber and reader of my blog. In this article I am posting a simply awesome series of icons. 192 round icons V various formats and in two versions: color and black and white (or rather gray and white). Icons are presented in PNG, Ai, Eps and PDF formats. PNG icons are available in two sizes: 64 by 64 pixels and 128 by 128 pixels. There is a separation for both color and monochrome icons.
The themes of the icons are absolutely diverse. All icons are made of very high quality and in the same style. Round icons with backgrounds of different colors. These icons can be used both to create an interface on a website and for printing: business cards, banners, and so on. The icons are slightly reminiscent of . They are the same round, and with backgrounds of different colors.
What is shown on the icons
I won't list all 192 images. Let me just say that here, in principle, is everything you need to create a stylized interface on the site. Handset, power button, check mark, mouse cursor, email dog, flag icon for address, gear icon for settings, email letter, search button. These icons are on almost every website. But this assembly also contains the following images: anchor, up and down arrows, bicycle, icon full battery and discharged, airship, lightning, wheel, bomb, written book, notepad, book suitcase, light bulb, car, calendar, camera, basket, compass, chat, tablet, clock, cloud, drops, google chrome, planet, music, roller, microphone, Magic wand, motorcycle, paint, schedule, plane, electrical plug, gift, quotes, photography, rocket, scissors, bus, scooter, shuttle, smartphone, stop sign, monitor, video camera, cup, plus and minus sign, umbrella and much more. Honestly, I'm just tired of listing them. You can download and view these icons yourself. I listed the images so that you can find the icon you are looking for by searching.
Reading continuous text is difficult and time-consuming. And skimming the headlines and looking at the pictures is easy and pleasant. Therefore, break any piece of monolithic text into information blocks. Write about the benefits of the product, its characteristics, provide facts about the company and its achievements. Visually separate all information blocks from each other using a background, bright illustrations and free space around the elements.
The text about the company on the TransCapitalBank website is divided into several information blocks.
On the page about the company on the BCS Broker website, there are four large information blocks: advantages, history, financial indicators, and managers.
Information blocks on the services page " Tinkoff Bank» are visually separated using free space and horizontal lines.
The text on the page about the capabilities of Bitrix 24 is divided into small blocks, each of which has a picture. Information blocks are separated by horizontal lines.
The page about the company on the Investtorgbank website is divided into three large information blocks: text about the bank, its mission and links to other pages.
The page about corn on the Avangard-Agro website is visually divided into blocks about characteristics, varieties, cultivation geography, and others.
Turn texts into lists
Most quick way Make texts easier to read by writing them in the form of lists. This format eliminates the need to create unnecessary semantic connections and transitions in the text. Only the most important information will remain in each list item.
All texts on the loan program page on the TKB Bank website are presented in the form of lists.
The numbered list on the BCS Broker website shows the sequence of actions of a personal broker.
Each item in the list of benefits on the Tinkoff Bank website is highlighted when you hover your mouse over it.
Make tables
It is convenient to pack the same type of content about goods or services into a table. Information in rows and columns is easy to compare with each other. For example, you can enter the tariffs of an Internet provider into the table, different ways growing plant seeds or calorie content of food.
A long table will become more convenient if you fix it in it top line when scrolling the page. This will make it clear what the data in each column means.
The catalog of financial products of the BCS Broker company is designed in the form of a table. It is convenient to sort and compare products with each other.
Detailed information about each product is displayed by clicking on its name. The row with the column names is always visible when scrolling the table.
Information about management companies is posted in table form on the Yakutsk city portal. Only the first five lines of fifty-three are shown. The remaining rows can be expanded by clicking on the “Show more” button.
Data on the collection of agricultural crops on the Avangard-Agro website are included in the table. If you move the slider at the top of the table, data for the selected year will be displayed. This way, the table remains compact and takes up little space on the page.
Rows in the table about Avangard-Agro products are highlighted when hovered over. Link to detailed information information about each plant appears when you click on a line.
Columns in the table with tariffs on the Bitrix 24 website are highlighted when hovered over.
Write instructions
Content in instructional format shows what sequence of actions a person must perform to obtain a particular result. The user does not have to think a lot and waste time searching for information. All that remains is to read each paragraph and follow the instructions.
Even if it seems that all the steps are obvious and it’s not at all difficult to place an order in an online store or sign up for a test drive at a car dealership, still write instructions. It is indispensable for new users, and will help old clients once again make sure that they are doing everything correctly.
The Tinkoff Insurance website contains instructions for clients who have had an insured event.
Instructions for hot keys, which are available when calling TKB Bank, save customers time. Now you don’t have to listen to the voice of the answering machine, but just press the desired button on the phone.
On the BCS Broker website there is brief instructions for currency exchange.
The investment instructions on the BCS Broker website consist of six points. The name of each item is signed at the bottom of the instructions, and detailed contents can be scrolled through using the arrows.
Detailed information has been posted on the BCS Broker website. step-by-step instruction for beginners in online trading.
Instructions for entrepreneurs from Tinkoff Bank explain how to open checking account in four steps.
The Tinkoff Insurance website has brief instructions on how to purchase insurance.
Draw diagrams
Graphic diagrams help to better understand complex goods and services. Use pictures and symbols to show what parts the product consists of and how those parts are interconnected.
Factoring at TransCapitalBank is presented in the form of a diagram. The actions of the bank, buyer and supplier are indicated by numbers and deciphered under the diagram.
The scheme of how the bonus system works at Tinkoff Bank shows how to accumulate and use points.
The interest-free period is valid credit card Tinkoff Bank is demonstrated in an interactive diagram.
Formalize the numbers
Thanks to numbers, the company’s website becomes more honest. A block with numbers is appropriate on any page. Show the number of clients, employees, completed projects, units sold, turnover or revenue for the last year. And people will draw their own conclusions about how much they can trust this company.
Numbers on home page The BCS Broker website talks about the company’s turnover, the number of clients and employees.
Financial indicators are shown on the company page on the BCS Broker website.
Bitrix24 shows the number of clients and tasks that they solved using the company's products.
Numbers on the main page " One click Yakutsk" confirm that the portal is working and solving the problems of the residents of Yakutsk.
The page about the One Click Yakutsk portal provides brief statistics of requests.
Avangard-Agro shows statistics about the situation in the fields.
On the Avangard-Agro website, instead of traditional texts about the company, big block with numbers.
Highlight headings and main ideas
Start your product page with an emotional headline. If all competitors write standard phrases about the large assortment of bicycles, then you will talk about ease of movement and unforgettable trips. Bright and unusual phrases break through banner blindness and draw users into further exploration of the offer.
Try to briefly formulate the main characteristics of the product. What problems does it solve, what are its advantages? What benefits will the client receive from cooperation with the company? Write the main conclusion that the user should make after studying the content on the site. For headings and important ideas, use high quality photos, colored frames, large font.
The page about travel insurance at Tinkoff Insurance begins with a relaxing headline and a photo familiar to tourists from an airport cafe.
Animal bites, injuries and hospitalization are an integral part of life and health insurance services. But at Tinkoff Insurance, the section begins not with horror stories, but with an emotional title that allows you to look at health insurance from a different angle.
The section on monitoring problems on the Yakutsk city portal begins with a description of how the service is useful for city residents.
The main thoughts in the news on the MDM Bank website are placed in a frame and highlighted in bold.
The banner at the beginning of the page about Tinkoff Bank draws attention to the idea that this is a reliable modern bank with big amount clients.
“Bonus miles on the card” are familiar words, but it’s not very clear what use they are. And the phrase “fly on vacation for free every year” sounds more specific and makes you scroll further to the page about the Tinkoff Bank credit card.
The section on Internet trading in BCS Broker begins with a description of the essence of the service in a call to action format.
The banner on the page about trading strategies in BCS Broker draws attention to the main benefit of clients - the opportunity to earn money without stress and overpayments.
Illustrate content
Images are also information, but they are easier to perceive and remember. Photographs visually dilute the page, help to connect the imagination and understand what is written in the text. If a verbal description can be supplemented or replaced with a picture, then it is worth doing.
You can add icons to almost any content on the site - schematic images small size. AIC believes that quality icons provide the right visual contact with the user. Draw your own icons, for example, for products in the catalog, names of sections in the menu and contacts of company departments.
Information about each shareholder is accompanied by a diagram that shows his share in the capital of TKB Bank.
In the lending section at TransCapitalBank, animated illustrations are used to illustrate the benefits.
The advantages of the BKS Broker company are illustrated with icons.
Online trading tools in BCS Broker are indicated by icons.
Security at Tinkoff Bank is described using small text and icons.
Icons have been selected for each of the four advantages of Tinkoff Insurance.
The process of growing crops on the Avangard-Agro website is shown using photographs. The images alternate by clicking on the name of the plant growth phase.
The interactive picture shows the share of Avangard-Agro fields that are occupied by different crops.
An interactive illustration on the Tinkoff Bank website shows what the process of accumulating money in separate accounts in Internet banking looks like.
An interactive illustration shows the share of each activity area in the structure of the Rotek holding.
An interactive illustration in a pop-up window shows what types of objects can be protected by Tinkoff Insurance.
The capabilities of the Yakutsk city portal are shown using icons.
Each tool for working in Bitrix24 is indicated by its own icon.
The advantages of Tinkoff Bank are indicated by icons. Profitable terms collaborations are demonstrated using animated pictures.
The illustrations on the Investtorgbank website were created based on the first letter in the section title and photographs of people. The benefits of the loan are divided into short paragraphs and indicated by pictograms.
The advantages of the KIT Finance Broker company are indicated by icons.
Use promotional blocks
At the end of the page about mortgage lending at TransCapitalBank there is a promotional block with links to other services.
A promotional block with a photo and large text on the page about BCS Broker services attracts attention to the free webinar.
The promotional block at the end of the page about Tinkoff Bank leads to sections about cards and deposits.
A bright banner invites you to find out detailed information about travel insurance from Tinkoff Insurance.
Drawing with a refrigerator on gray background attracts attention to the selection of recipes on the Foodkultur website.
Bright pictures in pop-up windows attract attention to sections of the Avangard-Agro website.
The promotional block in the business section on the Tinkoff Bank website invites you to download a mobile application.
A block with widgets on the main page of the KIT Finance Broker website draws attention to sections with information about the state of the stock market.
Make it easier to choose products
Product selection allows you to quickly find the item you need on the website. This tool replaces the need to read and compare descriptions of dozens of products.
Instead of texts about different types loans for small businesses on the TKB Bank website there is a selection of loan programs depending on the client’s needs.
The BCS Broker website offers a selection of personal investment solutions.
Users drag food into the pan and select recipes for dishes on the Foodkultur website.
Flat design has gained great popularity in last years. And it’s not surprising, because it provides artistic and even technical advantages.
If you don’t want to waste time drawing icons that don’t require uniqueness, then you’re probably looking for resources where you can download high-quality universal icons.
What a score! This is exactly what we are going to show you today.
The icons are made primarily in minimalism, without frills. Most icons are UI-oriented, but there are also regular ones.
We're guessing most of you will just download them, but it's worth a reminder: as with any free stuff, read before using it, especially on commercial projects. license agreement. It is possible that some icon sets were in free access at the time the article was written, but the license may have changed later. It's always better to be safe than sorry later. Just check the license before use.
1. Flaticon
On this popular service You may be interested in the following icon sets.
Basic set of vector UI icons
No matter what kind of websites or programs you're designing, using basic UI icons is always encouraged. This set offers over 50 vector icons for common elements such as Home, Search, Cancel, basic elements navigation and more. Current Package contains icons in SVG, EPS, PSD and PNG versions.
General Vector UI Icons Set
Since the icons in the first set are basic, you will most likely need in addition more icons user interface. Here's another vector set with over 100 icons.
The package contains SVG, EPS, PSD and PNG versions of icons. These icons are very simple, but since they are vector, you can change them as they are easy to edit.
More general vector icons
It's possible that previous sets had all the icons you needed (and maybe more), but it never hurts to have even more free resources. Here are some more common vector icons. This is the most big set- More than 140 icons and it contains more objects such as attachment icons, lock icons, chart icons, pie icons and many more.
Icons are available in SVG, EPS, PSD and PNG formats, which means you can edit them however you like.
Round flat UI icons
Especially important characteristic This set is that the icons can be customized directly on the site. There are 119 icons in the set, but with the ability to fully customize them, you can create as many variations as you want.
Another nice addition is that each icon has a name. Unfortunately, in most sets you have to guess what is shown. True, in some cases everything is obvious, but sometimes it’s difficult to guess without a signature.
Round flat shape icons
If you need icons with different shapes, you will be interested in this set. It contains common shapes and not so common ones, such as Celtic patterns, geometric figures, hearts, flowers, curls and more.
There are 82 fully customizable icons in the set, but unlike the previous set, many of the shapes don't have a label, so you'll have to guess. This, of course, is not critical, but still the name is a good addition.
Vector icons of cursors and pointers
There is hardly a designer who doesn’t need cursor and pointer icons. This set contains over 70 free icons in SVG, EPS, PSD and PNG formats, not a lot, but there are a lot of icons that can be used as is or used as a base to create your own pointer or cursor.
80+ Free Phone Vector Icons
If you're developing mobile sites or apps, this set of over 80 icons may not be enough, but if you need a selection of phone icons for your design, then this set will serve good start. Set contains vector icons smartphones, landlines, television and radio broadcasting and more.
2. Elegant themes
This service provides various topics for Wordpress. But on their blog they have published an interesting set of 384 free vector icons that can be used for a variety of purposes.
In fact, there are 192 icons, but they are presented in two versions: color and black and white. The package contains icons in AI, EPS, PDF and PNG (64px and 128px) formats.
3.Freepik
On this resource various graphic elements, which you can use when creating your design.
Freepik offers a set of rounded vector contact icons. This set includes icons for contacts, Email, chats, text, messages, notes and others. The icons are two-color, but since they are vector, you can recolor them however you want.
The kit is provided in two versions: commercial license ($5) and free version(requires attribution).
4. Vecteezy
The selection of social icons is simply huge. However, if you are looking for simple, minimalistic, flat icons social networks, the options are narrowing.
The Vecteezy website features simple, minimalist social media icons.
The set contains 12 icons of the most popular social networks. Each icon is placed in square, rounded and round shapes. The set contains icons in EPS and PNG formats (32x32 with 16x16).
So there you have it: 10 different icon sets for your next projects.
Let us know in the comments if you have any interesting sources of vector icons or comments regarding these sets.
Good luck with your projects and have a nice day!
Flat design has gained a lot of popularity in recent years. This is not surprising, since it has advantages in artistic and even technical terms.
If you decide to work with flat design, then you are most likely always looking for new interesting resources.
What a score! This is exactly what we are going to talk about today.
The icons I'm going to present today are mostly minimalist and no-frills. Most icons are UI-focused, but there are also general icon sets.
In this series we offer you a selection of social icons related to computers and technology in general, shopping, money and e-commerce, although not all of them will be flat.
I'm guessing most of you do this, but I think a reminder would do no harm: before using any free product, especially in commercial projects, read the license just in case. It's possible that some of the icons were free when I included them in the article, but then the license terms changed. It's always better to be safe than sorry - just double-check the license.
After all the necessary clarification, let's move on to icon sets.
1. Basic vector UI icons
No matter what website/app you are designing for, basic UI icons are always welcome. This icon set offers over 50 vector icons for common UI elements such as Home, Search, Cancel, main navigation, etc. The package contains SVG, EPS, PSD and PNG versions of icons.
2. General vector UI icons
The first package contains only the most basic icons; in addition to them, you will need more UI icons. Here's another vector pack with over 100 icons.
And again in the package there are SVG, EPS, PSD and PNG versions of the icons. There are no frills to these icons, but they are easy to edit if you need to.
3. 384 free vector flat icons
While the previous two collections were black and white, this is a color set. This is a pack of elegant flat icons on different themes.
In fact, these are 192 icons, but in two versions - color and black and white. In terms of formats, the package is available in AI, EPS, PDF and PNG (64px and 128px).
4. Common vector icons
It's entirely possible that previous generic vector icon packs have all the icons you need (and more), but since there's no such thing as too many free resources, here are some common vector icons. This is a big package - 140+. It also contains icons such as for mail, lock, charts, pie charts and much more.
The pack is available in SVG, EPS, PSD and PNG formats, which again means you can edit the icons as you please.
5. Round flat UI icons
We're back to flat icons. The special thing about these icons is that you can customize them directly on the site. There are 119 icons in the package, but with limitless opportunity settings, you can create as many icon variations as you want.
Another nice feature of this set is that all the icons have names. Unfortunately, in many packages the icons do not have names, and you have to guess. True, in some cases everything is quite obvious, but it can also be difficult to be sure without a name.
6. Round flat icons of various shapes
If you need icons in a variety of shapes, check out this pack. It has icons with various common and unusual shapes such as geometric shapes, hearts, flowers, swirls, etc.
The set consists of 82 fully customizable icons, but unlike the previous set, many of the shapes don't have names, so you'll have to guess. This, of course, does not spoil things, but with names it is easier.
7. Vector icons of cursors and pointers
A designer always needs such icons. This pack of 70+ free icons in SVG, EPS, PSD and PNG isn't exactly big, but it does offer a lot of icons that you can use as a basis for designing your own pointers and cursors. The package lacks some cursors, but overall the set is rich.
8. 80+ Free Vector Phone Icons
If you're developing mobile sites and apps, this pack of 80+ phone icons may not be enough, but if you just need phone icons for web design, then this pack is a good start.
The pack contains vector icons of smartphones, landlines, broadcasting and other communication objects. If you need more mobile icons, look at this article where you will find a large number of icons for Android, iOS and Windows.
9. Rounded Vector Communication Icons
This communication icon pack includes round icons for email, chat, text, smartphone, messages, notes and other similar communication methods. The icons are two-color, but since this is a vector set, you can easily recolor them if required.
The package is presented in two versions - a $5 commercial licensed version and a free version (which requires attribution).
10. Flat Vector Social Icons
Exists huge selection social icons - flat or some other. However, if you're looking for simple, minimalistic, flat social icons, your options are narrowed down.
The set contains 12 icons of the most popular social services. Each icon comes in square, round and circle shapes. The package is available in EPS and PNG (32x32 with a 16x16 icon center).
Here are all 10 different sets flat icons for your future project.
