Responsive Icon Set

Responsive Icons:

Web Development:

The following icon set is an example of how SVG images can be targeted and manipulated through javascript and CSS to become responsive to multiple platforms and screen sizes. Each icon is uniquely interactive and will change to improve readability and appearance as necessary.

This icon represents Web Development or multi-platform media. The image will change to a laptop as the screen size is scaled down.

Design & Image

This icon represents Graphic Design, Photography, and Electronic Image Production. As the browser is scaled down, details are hidden to ensure maximum readability and appearance.

Video Production & 3D Design

This icon represents Video and 3D Production. The play button is animated to change colours after the screen has loaded, and the 3D icon will be hidden at mobile sizes to maintain simplicity and consistency with the other icons.

Shop

This icon can be used on e-commerce sites as a shop or buy now icon. This icon is universally understandable and will direct users to a page with the appropriate payment and checkout options, or to more items for sale. The squares in the middle of the cart are animated at larger screen sizes and are hidden at mobile.

Ideas & Innovation

Examples of icon interactivity include hover states, CSS3 transitions, and GreenSock/Javascript functionality such as this Innovation icon which has each ray of light colorize individually to mimic the appearance of the light turning on. Some details are hidden at mobile to keep the icon concise.

Let's Talk!

This icon can be used to represent chatrooms and contact pages. At larger screen sizes two chat bubbles are visible.

Resumé

This icon will redirect users to a resume or education background page. Ideal for personal portfolio or job application sites.

Hire Me

Another example of my icons responsiveness and interactivity include resizing and removing minor details, such as this icon which hides a pencil and a few lines at smaller screen sizes to maximize icon clarity and readability.

I plan to use this icon in my personal portfolio site. This icon will direct interested clients to a page that will allow them to contact me with potential projects they would like me to design or develop.

Contact

This icon can link to a contact page or directly open up a blank email template. The icon swap between an unopened and open envelope at different screen sizes and potentially when hovered over as well.

Connect

This is an ideal icon to use for getting users to connect with the website or brand across different platforms, such as social media. The icon changes at mobile size to improve readability.

These icons are neutral in color so that they can easily be changed to comply with any color scheme or design guidelines. I plan to use most of these icons in my portfolio site, as well as for any other projects where they can be of use.

Responsive Icon Set:

Web Development

The following icon set is an example of how SVG images can be targeted and manipulated through javascript and CSS to become responsive to multiple platforms and screen sizes. Each icon is uniquely interactive and will change to improve readability and appearance as necessary.

This icon represents Web Development or multi-platform media. The image will change to a laptop as the screen size is scaled down.

Graphic Design & Image Production

This icon represents Graphic Design, Photography, and Electronic Image Production. As the browser is scaled down, details are hidden to ensure maximum readability and appearance.

Video Production

Video Production & 3D Design

This icon represents Video and 3D Production. The play button is animated to change colours after the screen has loaded, and the 3D icon will be hidden at mobile sizes to maintain simplicity and consistency with the other icons.

Shopping Cart Icon

Shop

This icon can be used on e-commerce sites as a shop or buy now icon. This icon is universally understandable and will direct users to a page with the appropriate payment and checkout options, or to more items for sale. The squares in the middle of the cart are animated at larger screen sizes and are hidden at mobile.

Light Bulb Icon

Ideas & Innovation

Examples of icon interactivity include hover states, CSS3 transitions, and GreenSock/Javascript functionality such as this Innovation icon which has each ray of light colorize individually to mimic the appearance of the light turning on. Some details are hidden at mobile to keep the icon clear and concise.

Chat Icon

Let's Talk!

This icon can be used to represent chatrooms and contact pages. At larger screen sizes two chat bubbles are visible.

Education Icon

Resumé

This icon will redirect users to a resume or education background page. Ideal for personal portfolio or job application sites. At mobile sizes the diploma becomes hidden.

Hire Me Icon

Hire Me

Another example of my icons responsiveness and interactivity include resizing and removing minor details, such as this Hire Me icon which hides the pencil and a few lines at smaller screen sizes to maximize icon clarity and readability.

I plan to use this icon in my personal portfolio site. This icon will direct interested clients to a page that will allow them to contact me with potential projects they would like me to design or develop.

Connect Icon

Connect

This is an ideal icon to use for getting users to connect with the website or brand across different platforms, such as social media. The icon changes at mobile size to improve readability.

These icons are neutral in color so that they can easily be changed to comply with any color scheme or design guidelines. I plan to use most of these icons in my portfolio site, as well as for any other projects where they can be of use.

Mail/Contact Icon

Contact

This icon can link to a contact page or directly open up a blank email template. The icon swap between an unopened and open envelope at different screen sizes and potentially when hovered over as well.