AI Art Icons - Generate AI Icons for your Website Design with MidJourney

Codex Community
16 Mar 202308:59

TLDRThe video explores the potential of AI-generated icons in web design, offering a fresh alternative to traditional icon sources like Font Awesome. The host discusses the limitations of current icon libraries and introduces MidJourney, an AI art platform, to create unique icons for a website. Using Discord, the process involves crafting prompts to generate various icon styles, such as a homepage, mail, and hamburger icon. The host emphasizes the importance of specific prompts to achieve desired icon aesthetics and demonstrates how to refine the process by excluding unwanted elements using 'no' in the prompt. The video concludes with integrating the generated envelope icon into a website design, showcasing the seamless blend of AI art and traditional web design techniques.


  • ๐Ÿ” Websites require icons, much like how hamburgers need cheese, and AI art can revolutionize the way we generate these icons.
  • ๐Ÿ” AI-generated icons could potentially replace traditional icon sources like Font Awesome, which now requires a paid subscription for full access.
  • ๐Ÿš€ MidJourney is a platform where AI art is created and allows users to explore and generate icons for their websites.
  • ๐Ÿ”‘ Using Discord to log in to MidJourney provides access to a user's created prompts and the ability to explore other people's creations.
  • ๐Ÿ”Ž The search function within MidJourney enables users to view different styles of icons and the prompts that generated them.
  • ๐Ÿ’Œ The process involves creating a prompt through Discord to generate specific icons, such as an envelope icon for a website's messaging feature.
  • ๐ŸŽจ The 'stylized 750' parameter adds more style to the general prompt, influencing the appearance of the generated icons.
  • ๐Ÿ“ฌ Iterative refinement of the prompt is necessary to achieve the desired icon style, such as specifying 'no app icon' to avoid app-style envelopes.
  • ๐Ÿ–ผ๏ธ The importance of a clear and concise prompt is emphasized for generating icons that fit the intended use, such as a white envelope on a white background for a website.
  • ๐Ÿ“ˆ The generated icons can be upscaled and integrated into a website design, showcasing the practical application of AI-generated icons in web design.
  • ๐ŸŒ The integration of AI icons into traditional web design elements, such as navigation menus and newsletter sign-ups, enhances the visual appeal and uniqueness of the website.

Q & A

  • What is the significance of icons in website design?

    -Icons are crucial in website design as they serve as visual elements that enhance user experience by providing quick and intuitive navigation. They can represent various functions like menus, mail, and user profiles, making the website more user-friendly.

  • Why might AI-generated icons be considered the next big thing in web design?

    -AI-generated icons could be the next big thing because they offer a fresh and unique approach to icon design. Unlike traditional icons that may be overused, AI art can create distinctive and stylistic icons that stand out and can potentially replace some of the conventional methods of sourcing icons.

  • What is the process of generating icons using MidJourney?

    -To generate icons with MidJourney, one needs to log in using Discord and create prompts through private messages to the MidJourney bot. The bot then generates AI art based on the prompts, which can be refined by adding more specific details or excluding unwanted elements.

  • How does the MidJourney platform help in exploring AI art?

    -MidJourney allows users to see all the prompts they've created and explore what other people have created. It provides a search function to look at different styles of icons generated through the platform, offering a detailed view of the icons and the prompts that generated them.

  • What is the role of a prompt in generating AI art?

    -A prompt is a crucial part of generating AI art as it guides the AI on what kind of art to create. It can be refined to be more specific to achieve the desired outcome, such as changing the style, color, or even excluding certain elements from the generated art.

  • How can one refine the AI-generated icons to better fit their needs?

    -To refine AI-generated icons, one can modify the prompt to be more specific, include or exclude certain elements, and add stylistic directions. For example, adding 'no app icon' to the prompt can help in generating icons that are not suited for app design but for web design.

  • What are the challenges in using AI-generated icons directly for web design?

    -AI-generated icons, while visually appealing, may not always fit the exact requirements for web design. They might come with gradients or backgrounds that need to be removed, and they are typically in a raster format like JPG, which may require additional editing in a program like Photoshop to be used effectively in web design.

  • How can one integrate AI-generated icons into a website?

    -After generating an AI icon, one can save it and then upload it to the website's content management system or editor. The icon can be resized and positioned as needed to fit the design. It's also important to ensure that the icon's background complements the website's design for a cohesive look.

  • What is the benefit of using a Discord community in the context of MidJourney?

    -The Discord community provides a platform for users to join the Codex Community for free, where they can interact with thousands of members, participate in Q&A sessions, weekly streams, and get immediate access to MidJourney without any hassles.

  • How does the use of AI icons impact the overall website design process?

    -The use of AI icons can streamline the website design process by providing custom and unique icons that can be generated quickly. It allows for experimentation with different styles and can save time that would otherwise be spent manually creating or sourcing icons.

  • What are some considerations when choosing icons for a website's navigation?

    -When choosing icons for a website's navigation, it's important to consider the icon's clarity, simplicity, and relevance to the function it represents. The icon should be easily recognizable and fit the overall design aesthetic of the website. Additionally, the icon should be in a suitable format and size for web use.



๐ŸŽจ Exploring AI Art for Icon Generation

The video begins with the speaker discussing the necessity of icons for websites, comparing them to the cheese in a hamburger. They highlight that while using icons from font awesome has been a common practice, it now requires a paid subscription for full access. The speaker is excited about the potential of AI-generated icons to revolutionize the way icons are sourced. They then dive into using a platform called Mid-Journey to create icons for a website they are building. They want a homepage icon, a mail icon, a hamburger icon, and a user profile icon. The speaker demonstrates the process of creating prompts on Mid-Journey through Discord and explores the generated icons, noting the variety of styles and the ability to refine prompts for better results. They also mention the community aspect of Mid-Journey, where users can see what others have created and join a free Codex Community for further engagement.


๐Ÿ“ฌ Crafting the Perfect Envelope Icon

The second paragraph focuses on the process of generating a specific icon: an envelope. The speaker starts by creating a simple prompt to generate an envelope icon but finds the initial results unsatisfactory, particularly with the color. They refine their prompt to generate multiple envelope icons and experiment with different styles, eventually aiming for a simple envelope on a white background. The speaker emphasizes the importance of crafting the right prompt to achieve the desired outcome. They find success with a refined prompt that excludes the word 'app' to get icons suitable for a website rather than an app. The speaker selects a preferred icon and demonstrates how to integrate it into a website, showing how it can be used in web design effectively. They also discuss the limitations of the AI-generated icons, such as the lack of vector output and the need for further editing in a program like Photoshop, but conclude that AI icons can be a valuable addition to a designer's toolkit.



๐Ÿ’กAI Art

AI Art refers to the creation of artwork using artificial intelligence. In the context of the video, AI Art is used to generate unique icons for website design, which is a departure from traditional methods and represents a new frontier in digital art and web design.


MidJourney is an AI art tool mentioned in the video that allows users to generate icons and other artwork through prompts. It represents a platform where AI art is created and shared, showcasing the potential of AI in the design process.

๐Ÿ’กFont Awesome

Font Awesome is a popular source for icons and web fonts. It is referenced in the video as a traditional source for icons, but the speaker notes that it now requires a paid subscription to access all icon types, highlighting the need for alternative, potentially cost-effective solutions like AI-generated icons.


Discord is a communication platform used in the video to interact with the MidJourney bot for generating AI art. It serves as an example of how technology and community platforms can be integrated to facilitate creative processes.


In the context of AI art, a prompt is a set of instructions or a description given to the AI to guide the generation of artwork. The video demonstrates how adjusting the prompt can refine the AI's output to better match the desired icon style.

๐Ÿ’กStylized 750

Stylized 750 is a term used in the video to describe a more stylized approach to the AI-generated icon. It's an example of how specific parameters can be included in the prompt to influence the AI's artistic direction.

๐Ÿ’กEnvelope Icon

An envelope icon is a common symbol used on websites to represent email or messaging functions. In the video, the process of generating an envelope icon using AI is explored, demonstrating how AI can be used to create recognizable symbols.


UI/UX stands for User Interface/User Experience and refers to the design of interactive digital products. The video touches on the importance of UI/UX in the context of selecting and integrating AI-generated icons into web design for optimal user engagement.


Remix, in the context of the video, refers to the process of taking an AI-generated icon and making variations or modifications to it. This showcases the flexibility of AI art, allowing for iterative design without starting from scratch each time.


Navigation refers to the process of moving around and finding one's way through a website. The video discusses the importance of icons in website navigation, emphasizing how AI-generated icons can enhance the user's ability to navigate and understand the site's structure.

๐Ÿ’กEditor X

Editor X is a web design tool used in the video to build and edit the website. It is the platform where the AI-generated icons are ultimately integrated, demonstrating the practical application of AI art in web design.


Websites require icons, much like hamburgers need cheese, to enhance user experience.

AI-generated icons could revolutionize the way icons are sourced for web design.

Traditional icons from Font Awesome may require a paid subscription for full access.

MidJourney is a platform where AI art, including icons, is created and shared.

Users can log in to MidJourney using Discord to access and create AI art.

MidJourney allows users to search and explore AI-generated icons created by others.

A prompt is used to generate specific styles of icons through MidJourney.

Stylized 750 is a parameter that adds more style to the general prompt for icon generation.

The prompt can be adjusted to refine the icon generation process and achieve desired results.

Adding 'no' before unwanted elements in the prompt can help to exclude them from the generated icons.

Generated icons can be used directly in web design without the need for additional editing.

MidJourney generates images in formats like JPG, which may require further editing for web use.

The generated icons can be upscaled and used in web design for navigation elements.

A Discord community provides support and additional resources for users of MidJourney.

AI icons can be integrated into traditional web design to enhance visual appeal and functionality.

The process of generating AI icons involves experimenting with different prompts to achieve the desired style.

MidJourney's AI art generation can be a timesaver for web designers looking for unique and customizable icons.

The generated icons can be easily integrated into web design platforms like Editor X for a seamless design process.