Features of the Icons8 Web App

Grasp of the main icons web app's features

  • Searching

    Enter a search query in the search bar and press enter key/search button. The most relevant icons set shows up. You may quickly vary icons styles, by selecting a style from the drop-down menu. Toggle switch button on the top right of the screen to switch between plain icons view and the icons view with titles:

    You may browse through categorized sets of icons listed on the left pane of the app. Various styles can be further applied. Note that sets of icons available for free in SVG are highlighted with "Free SVG" label:

    Quickly try out various styles by selecting a style from the drop-down menu:

    Editor tool comes up whenever an icon is clicked:

  • Editing / Formatting

    Editing and formatting tools show up whenever an icon from the list is clicked:

    A group of styles options is displayed within the editor pane. They are the styles applicable to the selected icon. You may quickly change the style of the icon just by clicking on the style of your choice.

    The editing tools are located on the most left pane of the editor. They are:
    • Recolor
    • Overlay
    • Text
    • No efects
    • Stroke
    • Padding
    • Background
    • Circle
    • Square

    The recolor tool aims to change the most prominent features of an icon. You may use various types of color selection tools to craft the desired look:

    Overlay tool provides you with functionality to add an overlay from a list. The color of the overlay can be further specified:

    Text editing is another excellent tool. This tool lets you text over your icon and change its size, style, and color:

    Recolor, overlay, and text are the effects applied to the icon with the use of a toggle button. You may combine the effects by setting the appropriate buttons. The rest of the effects (stroke, padding, background, circle, square) are applied with the use of the radio button. You may apply one of the effects at a time. No effects disables all the effects in the radio group.

    The stroke effect enhances the prominent features of the icon with the specified size/weight. You may change the color of the stroke either.

    Padding effect is used to generate space around an icon inside of outer borders:

    Background effect adds a background to the icon. Custom color of the background can be further specified.

    Circle effect has various parameters which make this feature to be a very flexible tool. You may specify stroke, icon and circle sizes.

    Set the fill toggle to "on" state to fill up the circle with a specific color of your choice.

    Square effect has similar feature set to the circular effect. Moreover, square effect has an extra parameter called corner radius. This parameter specifies the rounding of the square corners.

    Same as with circle, the square effect has a functionality to fill its interior:

  • Collections

    Collections are the best way to organize the icons you like. Collections help you to group certain icons for further applications. You may create many collections with the 1000 icons limit per collection. An icon can be added to a collection by dragging and dropping it. Another way to add an icon to a collection is by pressing on a special label. This label is located in the upper right corner of the outer space surrounding each icon. The label becomes visible when the mouse cursor is hovering the icon. Note that the red label states that the current icon is already added into your collection.

    You may drag and drop an SVG icon from the web app or your local file system right into your collection. Please note that only files in SVG format can be added to your collection.

    In addition to drag and drop feature, there are two more option exist to add a new icon to your collection. The first one is to click on "add new" button within your collection. This will launch the file manager. The manager will further guide you to select an SVG file from your local file system and add it to your collection:

    The last option to collect an icon is to click on the "Collect" button right in the icon editor:

    To delete an icon from a collection, hover the mouse cursor over the icon. Click on the "trash can" button that will come up. A dialog will further guide you to confirm and proceed with the deletion:

    To delete the entire collection, hover the mouse cursor over the collection in the list of collections. Click on the "trash can" button:

    Another way to delete the entire collection or to change its title is to click on the "more options" button while you are within a given collection. A menu with two options will show up. The options are: "edit title" of the collection and "delete" the entire collection.

  • Downloading

    Icon downloading feature is available from the main icon editor pane. Click on the download button to open the download window:

    The following window comes up:

    Paying customers are eligible to download icons in PNG, SVG, EPS, and PDF file formats in any size up to 2048 pixels. Free customers are allowed to download icons in PNG up to 100x100px. The Popular Icons and Logos are free in all formats, including SVG.

    Whenever you download a single icon, you add a copy of the icon to the Downloaded collection. The Downloaded collection let you access any of the ever downloaded icons. Use this collection if you need a variation of the icons that you have already downloaded. Jump in the collection, edit the icon, change its size and format and download it again. It is quick and easy!

    The icon download pane displays a pixel-perfect size for the selected icon. You can multiply this platform specific size by various factors like 1x, 2x, 3x and so forth. This way you get sharp PNG icons in multiple sizes. You may choose one of the predefined sizes or specify your custom size.

    There is an option to download selected icon in multiple sizes at once as a zip file. To achieve this, you have to choose the desired sizes with ctrl, or cmd key pressed and click on the download button.

    To download a collection you have to select it in the list of collections and click on download button. From the download screen you have several output options for your collection. These output options are:

    • PNG - download collection as a set of PNG icons
    • FONT - generate font from the collection and download it
    • SVG - download SVG sprite or ZIP with individual SVG's
    • EPS - download collection icons in EPS format
    • PDF - download collection icons in PDF format

  • HTML Options

    We have alternative options to icons download. With these options, you get the icons right into your app of any scale via HTML. To get started click on the HTML button from the editor screen:

    A window with HTML options will come up. With the first option it takes just a line of code to insert an icon in SVG or PNG format directly from CDN to your application of any scale:

    Another option is to get your images encoded to base64:

    Inline SVG option:

    Html SVG img tag option:

    Html SVG background option:

  • Multilanguage Support

    We support the following languages:

    • Chinese
    • English
    • French
    • Deutsch
    • Italian
    • Japanese
    • Portuguese
    • Russian
    • Spanish

    Click on the "country flag" button and choose the language you prefer:

  • Login / Logout

    Once you've got an Icons8 account, you’ll be able to login into any of our product including our web app.

  • Technical Support

    In case you have any question, issue or concern, no matter are you a paying or a free customer you are the most welcome to contact our friendly support team. We are completely customer service oriented, what means we are oriented on helping to people! It is that simple! Just try us out!

Suggest Edits