Skip to content

cyberalien/line-md

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
svg
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Material Line Icons

There are many icon sets that are designed to Material Design guidelines. You can find icons for anything you need.

This icon set is different:

  • Icons are animated using SVG animations. No CSS or JavaScript.
  • It follows guidelines that are used for 'Round' and 'TwoTone' icons in the official Material Design Icons set.
  • Sometimes 1px thin lines are used where it makes sense.

Preview is available at https://cyberalien.github.io/line-md/

Icon set is in development. It contains only few icons so far.

Icon requests

If you like this icon set, but it is missing icons that you need, please open an issue at repository.

SVG animations level 2

Icons use SVG animations, which are contained in icon code and do not require external stylesheet or script.

No, these are not outdated SMIL animations. Icons are animated using modern SVG spec, supported by all browsers.

Animation types

Most icons use "fade-in" animation. Animation shows icon appearing from nothing.

Other icons:

  • Icons that end with -loop use infinite animtions.
  • Icons that end with -out disappear icon. It is the opposite of same icon without -out suffix.
  • Icons that end with -transition transition between two icons.

Usage in HTML

  1. Include IconifyIcon component, see iconify-icon package for latest code.

  2. Add icon, using "line-md" prefix:

<iconify-icon icon="line-md:home"></iconify-icon>

Usage without web component

There are few issues with SVG animations.

Iconify icon web component solves those issues, but if you are using icons without it, see article that explains known SVG issues and solutions.

Licence

MIT

About

Material Line Icons. Icons that use SVG animations to animate stroke in shapes.

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project