1677845531
How to use Icons in Web Development
How to use Icons in Web Development
An icon is a visual symbol representing entities, concepts, or actions that enables web users to navigate the web easily. It is also a way to express the content of a web page, like buttons or functions. You can use them in various contexts, such as computer software, mobile apps, and websites.
Icon usage is one of the essential aspects of your user interface, although people tend to ignore them while undergoing their development projects. Your icons can represent what your brand speaks and guides users on your site. Therefore, it is necessary to create an outstanding one. You will learn what icons are and how to add them to your HTML page. You will also learn ways to make icons on your web pages accessible and tools for creating icons quickly.
Why icons?
Icons are essential on modern web pages and necessary to use on your web pages when building them. Here are some of the things icons can do on your web page:
- They enable easy navigation on websites improving the user’s experience.
- They attract attention to essential information by providing an appealing visual atmosphere for web users.
- They communicate meaning effectively on the website.
- You can improve the functionality of your web page with icons.
- With icons, web users can easily interact with the web interface.
- You can save visual space on your web page by using icons.
- They enable the visibility of your brand’s identity.
- Instead of lengthy descriptive texts on your web page, icons can be more engaging.
Creating Icons
Looking at what icons can do on our web pages, you need to go overboard with icon creation in your user interface to enhance web usage. Conversely, if icons are not created correctly on your web page, it could hinder web usage.
Let us look at several tricks for creating awesome icons for our web pages.
Meaningful symbolism: Ensure that the icons you add to your web pages communicate meaning to avoid confusing your users. You can achieve this by using icons directly related to your desired object or action. For example, an icon for a “bookmark” feature on a browser could be a symbol of a folded corner, like the one in Chrome.
Familiarity: Ensure you keep your web users from guessing what an icon is by assuming they are familiar with it, and this could prevent them from getting the value of what the icon is supposed to do. So use familiar icons on your web pages.
Simplicity: Try and make your icons as simple as possible because using complex icons can make users forget them easily. This will make them easily recognizable and memorable and won’t distract from the rest of the interface. For example, you can use a silhouette for a simple icon for a “home” button on your website.
Consistency: Ensure that all icons on your web page belong together by using a consistent style. This is for easy recognition and remembrance. Also, being consistent with the size and spacing of your icons can give an organized look. For example, you can use the same color scheme, shapes, and style for the icons. Also, icons in your navigation menu can be equal in size and have consistent spacing, like the one on the Amazon website.
Distinguishable: You should distinguish icons on your web page from one another with clear and distinct shapes, colors, and sizes.
Test icons: You need to test the icons you chose for your website with users to get feedback on what they think about them. For example, you can show them different icon versions and ask them to identify its meaning.
How to add icons to our Web Page
There are several ways we can add icons to our web pages. Let’s look at some of them:
Google Material Design Icons
We can add Google’s Material Design icons to our web page. Follow the following steps to add them to your web page:
- First, add the Material Design Icons stylesheet on your webpage. To do this, add the code below to the
<head>of your HTML document:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">- Next, you can add an icon to your webpage by using the
i' orspan` element with the class “material-icons”. Then add the desired icons from the Material Design Icons library with the appropriate icon name. Like this:
<i class="material-icons">icon name</i> | <span class="material-icons">icon name</span>- You can style the icon size using CSS on the
i' orspan` element. Let us demonstrate how to add icons with the Google Material Design Icons:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.icon-container {
display: flex;
justify-content: space-between;
color: purple;
padding: 100px;
}
.material-icons {
transform: scale(5);
}
</style>
</head>
<body>
<h1>Adding Icons With Google Material Design Icons</h1>
<div class="icon-container">
<span class="material-icons">home</span>
<span class="material-icons">search</span>
<span class="material-icons">favorite</span>
<span class="material-icons">add_shopping_cart</span>
<span class="material-icons">account_circle</span>
<span class="material-icons">settings</span>
<span class="material-icons">add</span>
</div>
</body>
</html>Here are the icons we have added:
Note: These icons can be used anywhere on your HTML page, like in the body, a button, a link, or a form.
Font Awesome Icons
Font Awesome is an icon font library with various icons you can add to web pages. Let’s look at how to use Font Awesome icons to add fonts:
- First, you add the Font Awesome CSS to your HTML document’s
<head>. To do this, add the following link tag to your HTML code:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous"/>The above link tag references the Font Awesome CSS file hosted on a Content Delivery Network (CDN) to import the icons.
- Once you include the CSS, you can start using the icons on your web page.
- To add an icon to your HTML, use the
i' element with thefa` class and the specific icon class you want.
<i class="fa fa-home"></i>- You can add the icon to a specific location on your web page by adding the
i' element to a container element such as adiv,p,button,a’, etc. Like this;
<button>
<i class="fa fa-home"></i>
Home
</button>- You can also use CSS to style the icons as desired. Let us demonstrate how to use Font Awesome to add icons:
<!DOCTYPE html>
<html>
<head>
<link
rel= "stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin= "anonymous"
/>
<style>
i {
font-size: 120px;
padding: 40px;
color: purple;
}
</style>
</head>
<body>
<h1>Adding Icons With Font Awesome</h1>
<div>
<i class="fas fa-home"></i>
<i class="fas fa-search"></i>
<i class="fas fa-user"></i>
<i class="fas fa-envelope"></i>
<i class="fas fa-shopping-cart"></i>
<i class="fas fa-cog"></i>
</div>
</body>
</html>
Here are the icons we have added:
There are other ways to add icons on our web pages, but the above are the ones we can cover in this article. However, we will use different methods of adding icons to explain the next section of this article.
Making Icons Accessible
Making icons accessible to all web users is essential, and we should use icons that people with disabilities such as visual impairment or color blindness can understand. Here are some considerations for making icons accessible to all:
Text labels: To ensure accessibility when using icons, add a text label with the icon. This approach will help individuals with a disability, like the visually impaired, to quickly understand what the icon is for and help them access it. Also, some people depend on hover to show text labels on their web pages, which is terrible for accessibility. This is because the user may not know about that, which can be difficult on a touch screen. In addition, those with visual impairment will also not access the information.
Clickable icons: When using clickable icons on your web page, it is better to ensure they are clickable on all devices. For example, the clickable icons should work with a mouse, keyboard touchscreen, or other input methods. In addition, the icon should be big enough for touchscreen users to work on all fingers for easy access.
Sizes of icons: It is better to use icons that can work in different sizes, and their clarity and recognition are still maintained. Also, ensure they are adequately sized so that users can access them. For example, ensure the icons can scale up or down and still possess clarity and recognition.
Color contrast: For users to use icons effectively, you should consider those with visual impairment when choosing colors. Ensure an excellent foreground-background color contrast for icons on your web page so visually impaired users can access them.
Use of ALT text: When you have linked icons on your page, ensure to add an ALT text for users to know the work and destination of the link. For example, you can add “Contact us” as the ALT text accompanying your contact icon.
Decorative icons: An icon is decorative if it does not convey specific information and has no functional purpose, meaning no action is assigned when clicked. Knowing whether an icon is decorative is necessary, so you can decide how to use it on your web page. For using accessible decorative icons on your web page, the best practice is to avoid using ALT text. There is no need for the ALT text to be read to screen readers, as it will confuse users.
To use decorative icons properly, the role attribute should be set to “presentation” or “none”, and the ALT attribute should be left empty. This approach will prevent screen readers from reading the icon. You can also provide a text alternative for the icon for users who may need help understanding it.
Let us see an example of how we can create a decorative icon with this icon from icons8 and ensure that it is accessible to users who rely on screen readers:
<!DOCTYPE html>
<html>
<head>
<style>
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
clip-path: inset(100%);
}
</style>
</head>
<body>
<h1>Decorative Icons for Accessibility</h1>
<div>
<img src="https://img.icons8.com/3d-fluency/94/null/heart-with-pulse.png" alt="" role="presentation" class="icon" />
<span class="visually-hidden">Decorative Icon</span>
</div>
</body>
</html>The outcome:
From the example above, the decorative icon is displayed with the img element. The alt attribute is left empty, which tells screen readers to ignore the icon, and the role attribute is set to “presentation” to show further the icon is decorative.
The span element with the “visually-hidden” class provides a text alternative for the icon for users who may need help understanding it. This element is visually hidden, but screen readers will read it. You can style the icons as you desire.
Informative icons: Informative icons convey information or instructions to the user. They help users quickly understand the meaning or function of a particular element or feature. Informative icons include settings, search, navigation, and alerts icons. Let us look at ways we can use informative icons to improve accessibility:
Use ALT text for informative icons to enable assistive technologies to read them. The alt text should clearly and concisely describe the icon’s meaning or function.
Provide enough context around the icon to clarify the meaning or function to users. For example, let us use the setting icon in icons8 to demonstrate how to use the informative icon for accessibility.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Informative Icons for Accessibility</h1>
<h2>Use of clickable settings icon for accessibility</h2>
<div>
<a href="#settings" aria-label="Settings Icon">
<img
src="https://img.icons8.com/external-filled-outline-deni-mao/50/null/external-setting-user-interface-advertise-friendly-filled-outline-deni-mao.png"
alt= "Settings Icon"
/>
</a>
<div id="settings" class="settings-menu"></div>
</div>
</body>
</html>
The outcome:
From the example above, the a tag creates a clickable element that links to the settings menu. In addition, the aria-label attribute is set to “Settings icon” to provide more information about the icon for screen readers and other assistive technologies.
The img tag displays the icon, and the div element with the id of “settings” is used to create the settings menu. The class settings-menu helps to style the settings menu.
You can style the icon as you desire.
- Semantic icons: A semantic icon is a standalone icon with a specific meaning. Using these icons on your web pages improves page load times and makes it easier to change the appearance of the icons. To consider accessibility for web users, we need to use a well-defined semantic label. Some of the ways we can use semantic icons in making accessibility considerations include:
- Use the
aria-labeloraria-labelledbyattribute to provide a text description of the icon’s purpose for screen readers. - Use the
roleattribute to give an appropriate semantic role for the icon. For example, if you want to use an icon as an image, use `role= “img```.
Session Replay for Developers
Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — an open-source session replay suite for developers. It can be self-hosted in minutes, giving you complete control over your customer data
Happy debugging! Try using OpenReplay today.
Tools for creating Icons
Here we will look at some tools available for creating icons, and they include the following:
Google Font Icons
Google Font Icons are open-source icon fonts you can add to web pages and other digital documents. The icons are simple, scalable, and customizable. To use Google Font Icons, add the link to the icon font to your HTML document’s <head> section and apply the appropriate CSS class to the element you want to style. Examples of some regular google font icons include the search, hamburger, and shopping cart icons.
Pros:
- They are open-source and free to use.
- You can easily use them to customize your web page, as you can embed them in a website using simple CSS.
- They are in the form of a font file rather than an image file, making them lightweight and fast to load.
- They are fully scalable due to their vector nature, and you can resize them without losing quality.
- They are accessible, as screen readers and other assistive technologies can easily read them.
Cons:
- Older browsers and devices may not support them.
- They may need to offer the flexibility of using images, especially for more complex icons or those with multiple colors.
- It may be challenging to achieve a highly detailed or specific design with them.
- They may have a licensing issue in some countries.
Unicons
Unicons are a type of Unicode character to represent icons or symbols. You can use them for different purposes like depicting emotions, pointing to a location, showing time, weather, etc. Some examples of unicons include the Finger-crossed emoticon, Man and woman holding hands, Pair of hearts, Man and woman with heart, Family, etc.
Pros:
- They can convey a lot of meaning in a single character.
- They can add visual interest and express emotions.
- You can use them to create visual designs and graphics, such as logos, infographics, and other materials.
- You can use them to convey information like showing time, weather, location, etc.
Cons:
- All devices or software do not support Unicons, as some older devices or systems may not display Unicons correctly.
- Some users may not know how to use Unicons, which can make them less effective as a means of communication.
Feather
Feather is an open-source icon set comprising simple icons. Examples include a heart icon for a “like” or “favorite” button, a search icon for a search bar, a shopping cart icon for an e-commerce website or app, a calendar icon for use in a scheduling or event-planning application, etc.
Pros:
- They are lightweight and straightforward, making them well-suited for websites, mobile apps, and other digital projects.
- They can be customized using CSS to change their size, color, and other properties.
- They are also fully open source, and you can use them for personal or commercial purposes.
- They are available in multiple formats, including SVG, PNG, and JavaScript, making them easy to use in different projects.
Cons:
- The icon set is relatively small, so you may not find the specific icon you need for your project.
- Some icons are simple and may not be suitable for more complex designs.
- Some people may find them too simplistic for their needs.
Icons8
Icons8 is a reliable platform that offers various high-quality icons and illustrations for several design projects. The icons are available in different styles, and you can download them in multiple formats, such as PNG, SVG, and AI. Icons in icons8 include icons for popular social media platforms such as Twitter, LinkedIn, Facebook, Instagram, etc., and icons related to business and finance, such as money bags, graphs, charts, etc.
Pros:
- It provides a collection of high-quality icons that are visually appealing and well-designed.
- The icons are available in various styles, such as flat, outlined, and line, which you can use to match the design style of a project.
- It offers many icons, from simple symbols to more complex illustrations.
- The icons can be easily downloaded and used in different types of software.
Cons:
- Some icons are only available for purchase, so they may not be free to use.
- Some users may need help customizing the icons to match their needs fully.
- Icon8 has the right to change, update or remove specific icons, which can inconvenience the users.
Font Awesome
Font Awesome is an open-source icon library that provides scalable vector icons that you can customize. You can use icons on websites, graphic design, and mobile apps. The library includes icons covering multiple themes, such as social media, web applications, business, and more.
Pros:
- Font Awesome is free to use, and it is open-source.
- The icons are vector-based, which means you can scale them up or down without losing quality.
- You can easily customize them using CSS.
- The icons are available in different formats, such as SVG, JavaScript, and web fonts.
- The icons are accessible, and you can use them with assistive technologies such as screen readers.
- It has an extensive library of icons, so you will likely find an icon that fits your needs.
Cons:
- Using Font Awesome icons may add additional requests to your website or app, slowing down page load times.
- While Font Awesome icons are customizable, you may need more control over the icon’s design.
- Using the library, whether it is locally hosted or via CDN, will increase the overall size of your website or app.
- Although Font Awesome has an extensive library, it may include only some icons you need.
Animated icon library Animated icons library allows you to use animated icons in your application or website. It is a library of over 1000+ customizable, lightweight, and easy-to-use SVG animated icons.
Pros:
- They are vector-based, which means they can be scaled up or down without losing quality.
- You can easily customize them using CSS, allowing for a wide range of color, size, and style options.
- They are accessible, and you can use them with assistive technologies such as screen readers.
- The library offers various animations, such as hover effects, looping animations, and button state changes, that help to add visual interest and engagement to your user interface.
- It has an extensive library of icons, so you’ll likely find an icon that fits your needs.
Cons:
- Using Animated Icons may add additional requests to your website or app, slowing down page load times.
- They may not support some older browsers.
- Some of the icons may require payment or have specific license terms.
- The library offers various animations, but they may have a different animation effect than you need.
- There may be limited support options if you need help customizing or implementing the icons.
Conclusion
You need to be sure you need icons on your web page, and when you do, the various tricks and considerations to make for icons in this article will help you do an excellent job. You can now add icons to your HTML page with the several methods and tools explained in this article.
Original article source at: https://blog.openreplay.com/
1674828744
Download Microsoft Azure Architecture Icons
Azure architecture icons help us to build a custom architecture diagram for our custom designs and solutions for the Customers.
Follow the below steps to download the Official Microsoft Azure Architecture Icons.
Step 1
Click on the link Azure icons – Azure Architecture Center | Microsoft Learn.
Step 2
On Azure architecture icons page, Select the I agree to the above terms Check box and click on Download SVG icons.
Step 3
All the Azure Icons will be downloaded as a Zip folder in the Downloads folder. Unzip the folder and have a look at all the icons used in Microsoft Azure Products in the Icons folder.
Note: Check for the Icon updates in the article and download the latest icons, whenever it is required.
Hope you have successfully downloaded Microsoft Azure Architecture icons.
Like and share your valuable feedback on this blog.
Original article source at: https://www.c-sharpcorner.com/
1672420500
Atom File-specific Icons for Improved Visual Grepping
File Icons
File-specific icons in Atom for improved visual grepping.
Supports the following core packages:
An API is offered for packages not listed above. See the integration steps for more info.
Installation
Open Settings → Install and search for file-icons.
Alternatively, install through command-line:
apm install --production file-icons
Customisation
Everything is handled using CSS classes. Use your stylesheet to change or tweak icons.
Consult the package stylesheets to see what classes are used:
- Icons:
styles/icons.less - Colours:
styles/colours.less - Fonts:
styles/fonts.less
Icon reference
Examples
Resize an icon
.html5-icon:before{
font-size: 18px;
}
// Resize in tab-pane only:
.tab > .html5-icon:before{
font-size: 18px;
top: 3px;
}
Choose your own shades of orange
.dark-orange { color: #6a1e05; }
.medium-orange { color: #b8743d; }
.light-orange { color: #cf9b67; }
Bring back PHP's blue-shield icon
.php-icon:before{
font-family: MFizz;
content: "\f147";
}
Assign icons by file extension
The following examples use attribute selectors to target specific pathnames:
.icon[data-name$=".js"]:before{
font-family: Devicons;
content: "\E64E";
}
Assign icons to directories
.directory > .header > .icon{
&[data-path$=".atom/packages"]:before{
font-family: "Octicons Regular";
content: "\f0c4";
}
}
Troubleshooting
I see this error after installing:
"Cannot read property 'onDidChangeIcon' of undefined"
A restart is needed to complete installation. Reload the window, or restart Atom.
If this doesn't help, please file an issue.
Installation halts with an npm error:
npm ERR! cb() never called!
There might be a corrupted download in your local cache. Delete ~/.atom/.apm, then try again:
rm -rf ~/.atom/.apm
apm install --production file-icons
An icon has stopped updating:
It's probably a caching issue. Do the following:
- Open the command palette: Cmd/Ctrl + Shift + P
- Run
file-icons:clear-cache - Reload the window, or restart Atom
Ruby files are showing the wrong font:
If language-ethereum is installed, remove it. This is a known issue with the package, which is no longer maintained. For Solidity support, use linter-solidity or language-solidity instead.
If language-ethereum isn't installed, please follow these steps and file an issue.
The tree-view's files are borked and look like this:
If you haven't restarted Atom since upgrading to File-Icons v2, do so now.
If restarting doesn't help, your stylesheet probably needs updating. See below.
My stylesheet has errors since updating:
As of v2.0, classes are used for displaying icons instead of mixins. Delete lines like these from your stylesheet:
-@import "packages/file-icons/styles/icons";
-@import "packages/file-icons/styles/items";
-@{pane-tab-selector},
.icon-file-directory {
&[data-name=".git"]:before {
- .git-icon;
+ font-family: Devicons;
+ content: "\E602";
}
}
Instead of @pane-tab… variables, use .tab > .icon[data-path]:
-@pane-tab-selector,
-@pane-tab-temp-selector,
-@pane-tab-override {
+.tab > .icon {
&[data-path$=".to.file"] {
}
}
These CSS classes are no longer used, so delete them:
-.file-icons-force-show-icons,
-.file-icons-tab-pane-icon,
-.file-icons-on-changes
It's something else.
Please file an issue. Include screenshots if necessary.
Integration with other packages
If you're a package author, you can integrate File-Icons using Atom's services API.
First, add this to your package.json file:
"consumedServices": {
"file-icons.element-icons": {
"versions": {
"1.0.0": "consumeElementIcons"
}
}
}
Secondly, add a function named consumeElementIcons (or whatever you named it) to your package's main export:
let addIconToElement;
module.exports.consumeElementIcons = function(func){
addIconToElement = func;
};
Then call the function it gets passed to display icons in the DOM:
let fileIcon = document.querySelector("li.file-entry > span.icon");
addIconToElement(fileIcon, "/path/to/file.txt");
The returned value is a Disposable which clears the icon from memory once it's no longer needed:
const disposable = addIconToElement(fileIcon, "/path/to/file.txt");
fileIcon.onDestroy(() => disposable.dispose());
NOTE: Remember to remove any default icon-classes before calling the service handler!
let fileIcon = document.querySelector("li.file-entry > span.icon");
+fileIcon.classList.remove("icon-file-text");
const disposable = addIconToElement(fileIcon, "/path/to/file.txt");Acknowledgements
v1 was originally based on sommerper/filetype-color. v2 was completely rewritten. Both versions owe their success to innumerable contributions from the Atom community.
Download Details:
Author: File-icons
Source Code: https://github.com/file-icons/atom
License: MIT license
1669219356
A Wrapping of Helium Icons (.svg Files) with Flutter
Helium Svg Icons
Is a wrapping of helium svg icons using Flutter SVG Icons
Usage:
SvgIcon(icon: HeliumSvgIcons.arrow_backward)Use this package as a library
Depend on it
Run this command:
With Flutter:
$ flutter pub add helium_svg_iconsThis will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):
dependencies:
helium_svg_icons: ^0.0.1Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.
Import it
Now in your Dart code, you can use:
import 'package:helium_svg_icons/helium_svg_icons.dart'; import 'package:flutter/material.dart';
import 'package:flutter_svg_icons/flutter_svg_icons.dart';
import 'package:helium_svg_icons/helium_svg_icons.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Helium Svg Icons',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Helium Svg Icons'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
SvgIcon(icon: HeliumSvgIcons.arrow),
IconTheme(
data: IconThemeData(size: 250),
child: SvgIcon(icon: HeliumSvgIcons.arrow)),
],
),
),
);
}
} Download Details:
Author: MohammedAsaadAsaad
Source Code: https://github.com/MohammedAsaadAsaad/helium_svg_icons
1667687700
Simple Tutorials About How to Make Icons with Sketch
Make Icons With Sketch
Hi Community
Allen Wang again, who made 30 Days of Swift project in the year of begin. Long time no see, folks🙌
I have posted some simple gif tutorials about how to make icons with Sketch on Twitter and Weibo one month ago, got a lot of wonderful feedbacks, almost 270K views and 380+ people get involved, particularly from developers, they were really following my steps and start to use Sketch, they don't need always to rely on designers.
The purpose to open source this project is hopefully can invite more designers join, create more gif tutorials and svg icons for anyone can learn and download.
Sketch source file was attached.
Open Design
Welcome anyone who have ability to make svg icon and gif tutorial, love to figure out what's the easiest way to draw a complex icon, you are definitely the one could help push this project to a big future. Believe me, it was a lot of fun.
Requirement(Pull request)
Create a new folder suffixed by your name, like 'Svg and gif - Allenwang'.
90*90 Black Solid SVG Icon, refer to The Noun Project guideline.
320*320 GIF Tutorial, I made with screenFlow and Gifrocket.
(Option) Add the MakeIconsWithSketch watermark in your gif would be perfect.
Note: All icons published to this project are licensed under Creative Commons Zero.
SVG Icon & GIF Tutorial
Special Thanks
Awesome Icon Designer Kyle Adams and his daily #makeicons with Illustrator tutorials.
Download Details:
Author: Allenwong
Source Code: https://github.com/allenwong/MakeIconsWithSketch
1667660669
Sketch-Icons: Generate A Dynamic Icon Library
Sketch Icons
A Sketch plugin that allows you to import a set of icons and automatically apply a color style.
📣 Read our Medium article to use Sketch Icons efficiently
⚠️ If you have some troubles with Sketch Icons, here are some recommendations:
- Sketch Icons is not compatible with MacOS El Capitan
- It seems that Sketch Focus plugin is preventing Sketch Icons from working properly, so please disable it
Features
Since the arrival of nested symbols and Sketch libraries, our worfklow has been incredibly improved.
But if, like us, you have wondered how to import all of your icons into Sketch and how to apply a color individually... Then this plug-in is made for you.
- Import a folder or a set of icons.
- Choose a color library and apply automatically a color.
- Enjoy your dynamic icons library.
That's all. ❤️
Import icons
Just go to Plugins -> Sketch Icons -> Import icons... and select your folder or your icons. You can also use the keyboard shortcut cmd + shift + i.
And... Voilà ! Your dynamic icons library is ready!
Replace severals icons
To save you even more time, we have designed a feature that allows you to replace or update icons already imported into your library. You will find this feature in Plugins -> Sketch Icons -> Replace icons....
✨ Organize icons (New)
You can now drag and drop your icons directly into Sketch (from a folder or an application like IconJar). Once your icons are dropped, select the set and go to Plugins -> Sketch Icons -> Organize icons....
Add a color on several icons
If you want to apply a color to an icon - or a set of icons - you can use this functionality Plugins -> Sketch Icons -> Apply a color.... You can also use the keyboard shortcut cmd + shift + m.
That's about all you need to know. This should save you a lot of time!
Do not hesitate to come back to us. We want your feedback :)
How to install the plugin
We recommend installing the plugin with Sketch runner.
Method 1: Sketch runner
Open Sketch Runner, search for "Sketch Icons", and click "Install".
Method 2: Manually
- Download the ZIP file and unzip
- Open
Sketch Icons.sketchplugin
Download Details:
Author: AMoreaux
Source Code: https://github.com/AMoreaux/Sketch-Icons
License: MIT license
1664885640
Simple-icons: SVG icons for Popular Brands
Simple Icons
Over 2300 Free SVG icons for popular brands. See them all on one page at SimpleIcons.org. Contributions, corrections & requests can be made on GitHub.
Usage
ℹ️ We ask that all users read our legal disclaimer before using icons from Simple Icons.
General Usage
Icons can be downloaded as SVGs directly from our website - simply click the download button of the icon you want, and the download will start automatically.
CDN Usage
Icons can be served from a CDN such as JSDelivr or Unpkg. Simply use the simple-icons npm package and specify a version in the URL like the following:
<img height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@v7/icons/[ICON SLUG].svg" />
<img height="32" width="32" src="https://unpkg.com/simple-icons@v7/icons/[ICON SLUG].svg" />Where [ICON SLUG] is replaced by the slug of the icon you want to use, for example:
<img height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@v7/icons/simpleicons.svg" />
<img height="32" width="32" src="https://unpkg.com/simple-icons@v7/icons/simpleicons.svg" />These examples use the latest major version. This means you won't receive any updates following the next major release. You can use @latest instead to receive updates indefinitely. However, this will result in a 404 error if the icon is removed.
Node Usage
The icons are also available through our npm package. To install, simply run:
npm install simple-iconsAll icons are imported from a single file, where [ICON SLUG] is replaced by a capitalized slug. We highly recommend using a bundler that can tree shake such as webpack to remove the unused icon code:
// Import a specific icon by its slug as:
// import { si[ICON SLUG] } from 'simple-icons/icons'
// For example:
// use import/esm to allow tree shaking
import { siSimpleicons } from 'simple-icons/icons';
// or with require/cjs
const { siSimpleicons } = require('simple-icons/icons');It will return an icon object:
console.log(siSimpleicons);
/*
{
title: 'Simple Icons',
slug: 'simpleicons',
hex: '111111',
source: 'https://simpleicons.org/',
svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">...</svg>',
path: 'M12 12v-1.5c-2.484 ...',
guidelines: 'https://simpleicons.org/styleguide',
license: {
type: '...',
url: 'https://example.com/'
}
}
NOTE: the `guidelines` entry will be `undefined` if we do not yet have guidelines for the icon.
NOTE: the `license` entry will be `undefined` if we do not yet have license data for the icon.
*/TypeScript Usage
Type definitions are bundled with the package.
PHP Usage
The icons are also available through our Packagist package. To install, simply run:
composer require simple-icons/simple-iconsThe package can then be used as follows, where [ICON SLUG] is replaced by a slug:
<?php
// Import a specific icon by its slug as:
echo file_get_contents('path/to/package/icons/[ICON SLUG].svg');
// For example:
echo file_get_contents('path/to/package/icons/simpleicons.svg');
// <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">...</svg>
?>Third-Party Extensions
Contribute
Information describing how to contribute can be found in the file CONTRIBUTING.md
Download Details:
Author: Simple-icons
Source Code: https://github.com/simple-icons/simple-icons
License: CC0-1.0 license
1664202736
A Mapping Library That Maps The Stringified Ionic Icon Name
Table of Contents
ionicons_named
Table of Contents
Live Example
Introduction
Library that builds and provides auto-generated string to icon mapping for all ionicons based from the stable branch for Flutter using the ionicons flutter package
Please note, if you include this library then Flutter will give you errors stating that it cannot tree shake icons when building for Android and iOS. You must add the --no-tree-shake-icons flag to your builds. For example:
flutter build apk --release --no-tree-shake-icons
Usage
import 'package:ionicons_named/ionicons_named.dart';
...
Icon(ionicons['boat_outline']),
...
Use this package as a library
Depend on it
Run this command:
With Flutter:
$ flutter pub add ionicons_namedThis will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):
dependencies:
ionicons_named: ^1.2.0+1Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.
Import it
Now in your Dart code, you can use:
import 'package:ionicons_named/ionicons_named.dart'; import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:ionicons_named/ionicons_named.dart';
import 'example_icon.dart';
void main() {
runApp(MaterialIconGalleryApp());
}
class MaterialIconGalleryApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Ionicons Gallery',
theme: ThemeData.light().copyWith(
iconTheme: IconThemeData(
color: Colors.black87,
size: 36.0,
),
textTheme: TextTheme(
bodyText2: TextStyle(
color: Colors.black87,
fontSize: 16.0,
),
),
),
home: MaterialIconGalleryHome(),
);
}
}
class MaterialIconGalleryHome extends StatefulWidget {
@override
State<StatefulWidget> createState() => MaterialIconGalleryHomeState();
}
class MaterialIconGalleryHomeState extends State<MaterialIconGalleryHome> {
final List<ExampleIcon> icons = [];
@override
void initState() {
super.initState();
for (var entry in ionicons.entries) {
icons.add(ExampleIcon(entry.value, entry.key));
}
}
var _searchTerm = '';
var _isSearching = false;
@override
Widget build(BuildContext context) {
final filteredIcons = icons
.where((icon) =>
_searchTerm.isEmpty ||
icon.title.toLowerCase().contains(_searchTerm.toLowerCase()))
.toList();
return Scaffold(
appBar: _isSearching ? _searchBar(context) : _titleBar(),
body: Scrollbar(
thumbVisibility: kIsWeb,
child: GridView.builder(
itemCount: filteredIcons.length,
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 300,
),
itemBuilder: (context, index) {
final icon = filteredIcons[index];
return InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute<void>(
builder: (BuildContext context) {
return GestureDetector(
onTap: () {
Navigator.of(context).pop();
},
child: Container(
color: Colors.white,
alignment: Alignment.center,
child: Hero(
tag: icon,
child: Icon(
icon.iconData,
size: 100,
),
),
),
);
},
),
);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Hero(tag: icon, child: Icon(icon.iconData)),
Container(
padding: EdgeInsets.only(top: 16.0),
child: Text(icon.title),
)
],
),
);
},
),
),
);
}
AppBar _titleBar() {
return AppBar(
title: Text('Material Icons Gallery'),
actions: [
IconButton(
icon: Icon(Icons.search),
onPressed: () {
ModalRoute.of(context)?.addLocalHistoryEntry(
LocalHistoryEntry(
onRemove: () {
setState(() {
_searchTerm = '';
_isSearching = false;
});
},
),
);
setState(() {
_isSearching = true;
});
})
],
);
}
AppBar _searchBar(BuildContext context) {
return AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_left),
onPressed: () {
setState(
() {
Navigator.pop(context);
_isSearching = false;
_searchTerm = '';
},
);
},
),
title: TextField(
onChanged: (text) => setState(() => _searchTerm = text),
autofocus: true,
style: TextStyle(fontSize: 18.0),
decoration: InputDecoration(border: InputBorder.none),
),
);
}
} Download Details:
Author: peiffer-innovations
Source Code: https://github.com/peiffer-innovations/ionicons_named
1662866847
A Flutter Widget to Show an Icon Collection To Pick
icon_picker
A Flutter widget to show an icon collection to pick.
This widget extend TextField and has a similar behavior as TextFormField
Usage
In the pubspec.yaml of your flutter project, add the following dependency:
dependencies:
...
icon_picker: "^2.1.0"
In your library add the following import:
import 'package:icon_picker/icon_picker.dart';
For help getting started with Flutter, view the online documentation.
Example
IconPicker use an internal MaterialIcon collection by default, but you can set your own icon collection.
You just need to pass in iconCollection param a Map<String, IconData>.
final Map<String, IconData> myIconCollection = {
'favorite': Icons.favorite,
'home': Icons.home,
'android': Icons.android,
'album': Icons.album,
'ac_unit': Icons.ac_unit,
...
}
IconPicker(
initialValue: 'favorite',
icon: Icon(Icons.apps),
labelText: "Icon",
title: "Select an icon",
cancelBtn: "CANCEL",
enableSearch: true,
searchHint: 'Search icon',
iconCollection: myIconCollection,
onChanged: (val) => print(val),
onSaved: (val) => print(val),
);
The result of val in onChanged, validator and onSaved will be a json String.
So, if you tap the icon ac_unit in the dialog window, the result value will be:
'{"iconName": "ac_unit", "codePoint": 60219, "fontFamily": "MaterialIcons"}'
Transforming the String result of IconPicker in an IconData:
String value = '{"iconName": "ac_unit", "codePoint": 60219, "fontFamily": "MaterialIcons"}'
var iconDataJson = jsonDecode(value);
IconData icon = IconData(iconDataJson['codePoint'], fontFamily: iconDataJson['fontFamily']);
Icon(icon);
Preview
Use this package as a library
Depend on it
Run this command:
With Flutter:
$ flutter pub add icon_pickerThis will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):
dependencies:
icon_picker: ^2.1.0Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.
Import it
Now in your Dart code, you can use:
import 'package:icon_picker/icon_picker.dart'; import 'package:flutter/material.dart';
import 'package:icon_picker/icon_picker.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter IconPicker Demo',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
GlobalKey<FormState> _oFormKey = GlobalKey<FormState>();
TextEditingController? _controller;
//String _initialValue = '';
String _valueChanged = '';
String _valueToValidate = '';
String _valueSaved = '';
@override
void initState() {
super.initState();
//_initialValue = 'home';
_controller = TextEditingController(text: 'home');
_getValue();
}
/// This implementation is just to simulate a load data behavior
/// from a data base sqlite or from a API
Future<void> _getValue() async {
await Future.delayed(const Duration(seconds: 3), () {
setState(() {
//_initialValue = 'favorite';
_controller?.text = 'favorite';
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter IconPicker Demo'),
),
body: SingleChildScrollView(
padding: EdgeInsets.only(left: 20, right: 20, top: 10),
child: Form(
key: _oFormKey,
child: Column(
children: <Widget>[
IconPicker(
controller: _controller,
//initialValue: _initialValue,
icon: Icon(Icons.apps),
labelText: "Icon",
enableSearch: true,
onChanged: (val) => setState(() => _valueChanged = val),
validator: (val) {
setState(() => _valueToValidate = val ?? '');
return null;
},
onSaved: (val) => setState(() => _valueSaved = val ?? ''),
),
SizedBox(height: 30),
Text(
'IconPicker data value onChanged:',
style: TextStyle(fontWeight: FontWeight.bold),
),
SizedBox(height: 10),
SelectableText(_valueChanged),
SizedBox(height: 30),
ElevatedButton(
onPressed: () {
final loForm = _oFormKey.currentState;
if (loForm?.validate() == true) {
loForm?.save();
}
},
child: Text('Submit'),
),
SizedBox(height: 30),
Text(
'IconPicker data value validator:',
style: TextStyle(fontWeight: FontWeight.bold),
),
SizedBox(height: 10),
SelectableText(_valueToValidate),
SizedBox(height: 30),
Text(
'IconPicker data value onSaved:',
style: TextStyle(fontWeight: FontWeight.bold),
),
SizedBox(height: 10),
SelectableText(_valueSaved),
SizedBox(height: 30),
ElevatedButton(
onPressed: () {
final loForm = _oFormKey.currentState;
loForm?.reset();
setState(() {
_valueChanged = '';
_valueToValidate = '';
_valueSaved = '';
});
},
child: Text('Reset'),
),
],
),
),
),
);
}
} Download Details:
Author: m3uzz
Source Code: https://github.com/m3uzz/icon_picker
1661524080
Responsive_svg_icons: A Wrapping Of Responsive Icons (.svg Files)
Responsive Svg Icons
Is a wrapping of responsive svg icons using Flutter SVG Icons
Usage:
SvgIcon(icon: ResponsiveSvgIcons.archive)Use this package as a library
Depend on it
Run this command:
With Flutter:
$ flutter pub add responsive_svg_iconsThis will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):
dependencies:
responsive_svg_icons: ^0.0.1Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.
Import it
Now in your Dart code, you can use:
import 'package:responsive_svg_icons/responsive_svg_icons.dart';example/lib/main.dart
import 'package:flutter/material.dart';
import 'package:flutter_svg_icons/flutter_svg_icons.dart';
import 'package:responsive_svg_icons/responsive_svg_icons.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Resoponsive Svg Icons',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Resoponsive Svg Icons'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SvgIcon(
size: 30,
icon: ResponsiveSvgIcons.battery,
),
SvgIcon(
size: 100,
icon: ResponsiveSvgIcons.battery,
),
SvgIcon(
size: 200,
icon: ResponsiveSvgIcons.battery,
),
// IconTheme(
// data: const IconThemeData(size: 250),
// child: SvgIcon(icon: ResponsiveSvgIcons.cart)),
],
),
),
);
}
}Download Details:
Author: MohammedAsaadAsaad
Source Code: https://github.com/MohammedAsaadAsaad/responsive_svg_icons
License: MIT license
1661487360
Simplifies The Task Of Updating Your Flutter App's Launcher Icon
Flutter Launcher Icons Maker
Fork from Flutter Launcher Icons. Add merge pull request of generate windows, macos and web icons.
A command-line tool which simplifies the task of updating your Flutter app's launcher icon. Fully flexible, allowing you to choose what platform you wish to update the launcher icon for and if you want, the option to keep your old launcher icon in case you want to revert back sometime in the future.
✨ What's New
📖 Guide
1. Setup the config file
Add your Flutter Launcher Icons configuration to your pubspec.yaml or create a new config file called flutter_launcher_icons.yaml. An example is shown below. More complex examples can be found in the example projects.
dev_dependencies:
flutter_launcher_icons_maker: "^0.10.1"
flutter_icons:
android: true
ios: true
macos: true
windows: true
web: true
image_path: "assets/icon/icon.png"
If you name your configuration file something other than flutter_launcher_icons.yaml or pubspec.yaml you will need to specify the name of the file when running the package.
flutter pub get
flutter pub run flutter_launcher_icons_maker:main -f <your config file name here>
Note: If you are not using the existing pubspec.yaml ensure that your config file is located in the same directory as it.
2. Run the package
After setting up the configuration, all that is left to do is run the package.
flutter pub get
flutter pub run flutter_launcher_icons_maker:main
If you encounter any issues please report them here.
In the above configuration, the package is setup to replace the existing launcher icons in both the Android and iOS project with the icon located in the image path specified above and given the name "launcher_icon" in the Android project and "Example-Icon" in the iOS project.
🔍 Attributes
Shown below is the full list of attributes which you can specify within your Flutter Launcher Icons configuration.
android/ios
true: Override the default existing Flutter launcher icon for the platform specifiedfalse: Ignore making launcher icons for this platformicon/path/here.png: This will generate a new launcher icons for the platform with the name you specify, without removing the old default existing Flutter launcher icon.
image_path: The location of the icon image file which you want to use as the app launcher icon
image_path_android: The location of the icon image file specific for Android platform (optional - if not defined then the image_path is used)
image_path_ios: The location of the icon image file specific for iOS platform (optional - if not defined then the image_path is used)
Note: iOS icons should fill the entire image and not contain transparent borders.
The next two attributes are only used when generating Android launcher icon
adaptive_icon_background: The color (E.g. "#ffffff") or image asset (E.g. "assets/images/christmas-background.png") which will be used to fill out the background of the adaptive icon.
adaptive_icon_foreground: The image asset which will be used for the icon foreground of the adaptive icon
Flavor support
Create a Flutter Launcher Icons configuration file for your flavor. The config file is called flutter_launcher_icons-<flavor>.yaml by replacing <flavor> by the name of your desired flavor.
The configuration file format is the same.
An example project with flavor support enabled has been added to the examples.
❓ Troubleshooting
Listed a couple common issues with solutions for them
Generated icon color is different from the original icon
Caused by an update to the image dependency which is used by Flutter Launcher Icons.
Use #AARRGGBB for colors instead of ##AABBGGRR, to be compatible with Flutter image class.
Image foreground is too big / too small
For best results try and use a foreground image which has padding much like the one in the example.
Dependency incompatible
You may receive a message similar to the following
Because flutter_launcher_icons >=0.9.0 depends on args 2.0.0 and flutter_native_splash 1.2.0 depends on args ^2.1.1, flutter_launcher_icons >=0.9.0 is incompatible with flutter_native_splash 1.2.0.
And because no versions of flutter_native_splash match >1.2.0 <2.0.0, flutter_launcher_icons >=0.9.0 is incompatible with flutter_native_splash ^1.2.0.
So, because enstack depends on both flutter_native_splash ^1.2.0 and flutter_launcher_icons ^0.9.0, version solving failed.
pub get failed (1; So, because enstack depends on both flutter_native_splash ^1.2.0 and flutter_launcher_icons ^0.9.0, version solving failed.)
For a quick fix, you can temporarily override all references to a dependency: See here for an example.
👀 Example
Note: This is showing a very old version (v0.0.5)
Use this package as a library
Depend on it
Run this command:
With Dart:
$ dart pub add flutter_launcher_icons_makerWith Flutter:
$ flutter pub add flutter_launcher_icons_makerThis will add a line like this to your package's pubspec.yaml (and run an implicit dart pub get):
dependencies:
flutter_launcher_icons_maker: ^0.10.2Alternatively, your editor might support dart pub get or flutter pub get. Check the docs for your editor to learn more.
Import it
Now in your Dart code, you can use:
import 'package:flutter_launcher_icons_maker/abstract_platform.dart';
import 'package:flutter_launcher_icons_maker/android.dart';
import 'package:flutter_launcher_icons_maker/constants.dart';
import 'package:flutter_launcher_icons_maker/contents_image_object.dart';
import 'package:flutter_launcher_icons_maker/custom_exceptions.dart';
import 'package:flutter_launcher_icons_maker/icon_template.dart';
import 'package:flutter_launcher_icons_maker/ios.dart';
import 'package:flutter_launcher_icons_maker/macos.dart';
import 'package:flutter_launcher_icons_maker/main.dart';
import 'package:flutter_launcher_icons_maker/utils.dart';
import 'package:flutter_launcher_icons_maker/web.dart';
import 'package:flutter_launcher_icons_maker/windows.dart';
import 'package:flutter_launcher_icons_maker/xml_templates.dart';Special thanks
- Thanks to Brendan Duncan for the underlying image package to transform the icons.
- Big thank you to all the contributors to the project. Every PR / reported issue is greatly appreciated!
Download Details:
Author: gsmlg-dev
Source Code: https://github.com/gsmlg-dev/flutter_launcher_icons_maker
License: MIT license
1660492140
Food_icons: A New Flutter Package Project
A food icon library
Usage
add Food.ttf font to pubspec.yaml
flutter:
fonts:
- family: Food
fonts:
- asset: packages/food_icons/Food.ttf
use a static icon
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Icon(FoodIcons.oven);
}
}
find an icon by name
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Icon(FoodIcons.getIcon('bowl'));
}
}Use this package as a library
Depend on it
Run this command:
With Flutter:
$ flutter pub add food_iconsThis will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):
dependencies:
food_icons: ^0.0.6Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.
Import it
Now in your Dart code, you can use:
import 'package:food_icons/food_icons.dart';Original article source at: https://pub.dev/packages/food_icons
1658482143
Flutter_svg_icons: A Package to Show Svg Asset Files in Icon Widgets
Flutter SVG Icons
A package to show svg asset files in icon widgets, supporting responsive svg icons.
Features
- Show svg asset files in icon widgets.
- Support responsive icons.
Getting started
In pubspec.yaml file, insert flutter_svg_icons as dependency:
flutter_svg_icons: ^0.0.1
Usage
Make sure that your svg files are added to your project assets.
- Svg Icon - by default, its color will be the same as icon theme color.
SvgIcon(icon: SvgIconData('assets/flutter_logo.svg'))
- Svg Icon - disable
responsiveColorand set customcolor.
SvgIcon(color: Colors.red, responsiveColor:false, icon: SvgIconData('assets/flutter_logo.svg'))
- Responsive Svg Icon
SvgIcon(icon: ResponsiceSvgIconData({
64: 'assets/archive_s.svg',
128: 'assets/archive_m.svg',
9999: 'assets/archive_l.svg'
}))Installing
Use this package as a library
Depend on it
Run this command:
With Flutter:
$ flutter pub add flutter_svg_iconsThis will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):
dependencies:
flutter_svg_icons: ^0.0.1+3Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.
Import it
Now in your Dart code, you can use:
import 'package:flutter_svg_icons/flutter_svg_icons.dart';example/lib/main.dart
import 'package:flutter/material.dart';
import 'package:flutter_svg_icons/flutter_svg_icons.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'SVG Icons',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'SVG Icons'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
var responsiveIconData = ResponsiveSvgIconData({
64: 'assets/archive_s.svg',
128: 'assets/archive_m.svg',
9999: 'assets/archive_l.svg'
});
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
children: [
const Text(
'As icon theme color:',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
const SvgIcon(size: 60, icon: SvgIconData('assets/flutter_logo.svg')),
const Text(
'Pure color:',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
SvgIcon(
size: 60,
responsiveColor: false,
icon: SvgIconData('assets/flutter_logo.svg',
colorSource: SvgColorSource.specialColors),
),
SvgIcon(
responsiveColor: false,
size: 60,
icon: SvgIconData('assets/smiling-sun-svgrepo-com.svg',
colorSource: SvgColorSource.specialColors)),
],
),
const Text(
'Customized color:',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
const SvgIcon(
responsiveColor: false,
size: 60,
color: Colors.red,
icon: SvgIconData(
'assets/flutter_logo.svg',
)),
const Text(
'Responsive Icon:',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SvgIcon(
icon: responsiveIconData,
size: 25,
),
SvgIcon(
icon: responsiveIconData,
size: 70,
),
SvgIcon(
icon: responsiveIconData,
size: 130,
)
],
)
],
),
);
}
}Author: MohammedAsaadAsaad
Source Code: https://github.com/MohammedAsaadAsaad/flutter_svg_icons
License: MIT license
1658474700
Feather_svg_icons: Feather svg icons for flutter
Feather Svg Icons
Is a wrapping of feather svg icons using Flutter SVG Icons
Usage:
SvgIcon(icon: FeatherSvgIcons.arrow_backward)Installing
Use this package as a library
Depend on it
Run this command:
With Flutter:
$ flutter pub add feather_svg_iconsThis will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):
dependencies:
feather_svg_icons: ^0.0.1Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.
Import it
Now in your Dart code, you can use:
import 'package:feather_svg_icons/feather_svg_icons.dart';example/lib/main.dart
import 'package:flutter/material.dart';
import 'package:flutter_svg_icons/flutter_svg_icons.dart';
import 'package:feather_svg_icons/feather_svg_icons.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Feather Svg Icons',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Feather Svg Icons'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
SvgIcon(icon: FeatherSvgIcons.arrow_backward),
IconTheme(
data: IconThemeData(size: 250),
child: SvgIcon(icon: FeatherSvgIcons.activity)),
],
),
),
);
}
}TODO: Put a short description of the package here that helps potential users know whether this package might be useful for them.
Features
TODO: List what your package can do. Maybe include images, gifs, or videos.
Getting started
TODO: List prerequisites and provide or point to information on how to start using the package.
Usage
TODO: Include short and useful examples for package users. Add longer examples to /example folder.
const like = 'sample';
Additional information
TODO: Tell users more about the package: where to find more information, how to contribute to the package, how to file issues, what response they can expect from the package authors, and more.
Author: MohammedAsaadAsaad
Source Code: https://github.com/MohammedAsaadAsaad/feather_svg_icons
License: MIT license
1658217120
Bootstrap_icons: Bootstrap Icons for Flutter
Bootstrap Icons for Flutter
Implementation of Bootstrap Icons v1.8.1 in Flutter with over 1,600 icons..
Installation
Add this to your package's pubspec.yaml file:
dependencies:
bootstrap_icons: ^1.8.1
Usage
import 'package:bootstrap_icons/bootstrap_icons.dart';
class MyWidget extends StatelessWidget {
Widget build(BuildContext context) {
return IconButton(
icon: Icon(BootstrapIcons.alarm),
);
}
}
Contributing
If you want to contribute to this project, you may easily create issues and send PRs. Please take note that your code contributions will be applicable under MIT license unless specified otherwise.
Installing
Use this package as a library
Depend on it
Run this command:
With Flutter:
$ flutter pub add bootstrap_iconsThis will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):
dependencies:
bootstrap_icons: ^1.8.1Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.
Import it
Now in your Dart code, you can use:
import 'package:bootstrap_icons/bootstrap_icons.dart';example/lib/main.dart
import 'package:bootstrap_icons/bootstrap_icons.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'MyApp',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(BootstrapIcons.alarm),
Text('Alarm'),
],
),
),
),
);
}
}Explore Bootstrap Icons »
Credits
- Ricardo Dalarme (Package)
- @twbs (Icons)
Original article source at: https://pub.dev/packages/bootstrap_icons
