Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Customizing Icons to Complement Fonts

Gleb Stroganov
September 18, 2023

Customizing Icons to Complement Fonts

Important players in beautiful design are the core elements of icons and fonts. We in Evil Martians believe that developing a solid connection between icons and fonts is one way to give our products a polished sense of beauty, a better user experience, and in some cases, perhaps even better functionality.

Slides support my talk in Bites & Bytes in Lisbon and show the techniques how and why you need to take your icons to the next level and how you can apply some techniques to your projects.

Gleb Stroganov

September 18, 2023
Tweet

More Decks by Gleb Stroganov

Other Decks in Design

Transcript

  1. Customizing
    Icons to
    Complement
    Fonts
    Gleb
    Stroganov
    Bites & Bytes. Lisbon. 2023

    View full-size slide

  2. The icon and font
    scene

    View full-size slide

  3. Selecting fonts
    fonts.google.com

    View full-size slide

  4. Reference icons
    feathericons.com

    View full-size slide

  5. Default view

    View full-size slide

  6. Default view

    View full-size slide

  7. Default view

    View full-size slide

  8. Font anatomy
    fonts.google.com/knowledge

    View full-size slide

  9. Comparison view

    View full-size slide

  10. Icon modification 1
    high-contrast
    Playfair Display

    View full-size slide

  11. Icon modification 1
    high-contrast

    View full-size slide

  12. Icon modification 1
    bonus exploration 1

    View full-size slide

  13. Using character sets
    for further inspiration

    View full-size slide

  14. Icon modification 1
    bonus exploration 2

    View full-size slide

  15. push the
    boundaries and
    emphasize the
    importance of
    exploration
    even if we break some rules

    View full-size slide

  16. Icon modification 2
    square angles
    Kanit

    View full-size slide

  17. Icon modification 2
    square angles

    View full-size slide

  18. Icon modification 2
    bonus exploration

    View full-size slide

  19. Icon modification 3
    ink traps
    GT Flexa

    View full-size slide

  20. Icon modification 3
    ink traps

    View full-size slide

  21. Icon modification 3
    bonus exploration

    View full-size slide

  22. Adjusting arrows

    View full-size slide

  23. EXPLORE
    THE WAYS
    TO BRING
    BEAUTY
    INTO YOUR
    PROJECTS
    new fonts
    new icons
    new forms

    View full-size slide

  24. We love icons 

    and fonts
    evil-icons.io Google fonts

    View full-size slide

  25. Learn more about
    fonts on our blog

    View full-size slide

  26. @evilmartians evilmartians.com
    @strongeron
    Thank
    you!

    View full-size slide