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 without 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.

You can browse all icons at https://icon-sets.iconify.design/line-md/

Click any icon to get code you can use in your project.

Rendering animation

Vast majority of icons in this repository use "rendering" animation: icon shapes are rendered one by one.

This is the safest way to animate icons, which improves UX rather than makes it worse.

Why is that?

Typical "bounce" animations make UX worse because:

• They take user's focus from actual content.
• Looping animations use a lot of resources, making page slower. CPU is always busy, so on mobile devices such animations deplete battery.

Rendering animation, if used correctly, can improve user experience. Animation takes user focus only temporarily, when icon is rendered. Animation duration is very short, so it does not use too much resources.

Icon requests

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

Pull requests with icons are not accepted. This icon set is used as for testing custom SVG animation software, all icons in this repository are generated by that software.

Icon types

There are several directories with different variations of the same icons:

• svg-static contains icons without animations.
• svg contains icons animated with SVG animations spec.
• svg-style contains icons that use CSS animations, CSS is embedded using <style> tag.
• css-json contains icons that use CSS animations, but CSS is separate from SVG (see below).
• svg-frames-120fps contains SVG files for each animation frame, rendered at 120 frames per second.

SVG animations level 2

Icons in svg directory 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.

CSS animations

Icons in svg-style and css-json directories rely on CSS to animate icons.

These are superior to SVG animations because:

• CSS animations are usually faster and use less resources.
• Icons are compact because CSS can be moved to a .css file and cached in browser, also avoiding content duplication.
• Icons check user prefers-reduced-motion settings, rendering static icon for users that do not want animations.
• CSS animations have predictable timing. Show icon and animation starts. Change display mode in CSS to show/hide icon. With SVG animations level 2 spec, display has no effect, so triggering animation is not always trivial.

However, there is one downside - browser support.

This section has been written at the end of 2025.

By the end of 2025, SVG+CSS cannot be used in production because of Safari browser.

Safari browser does not support path() CSS function for d attribute, but Safari Technology Preview does support it, so hopefully sometime in 2026 Safari finally joins the rest of modern browsers and SVG+CSS will be usable in production.

CSS animations as JSON

Files in css-json directory are animated with CSS, but stored in JSON format, so SVG and CSS are separate.

These files are for developers, so you can render final icons yourself.

JSON format has the following properties:

• content contains SVG content, as string.
• viewBox contains icon viewBox attribute value, as object.
• classes contains list of used CSS classes, where key is class name, value is an object (see below).
• keyframes contains list of used animations, where key is an animation name, value is CSS.

Classes property is an object, with the following keys (all keys are optional):

• rules contains rules as string.
• animation contains rules for animations, as string. It is separate from rules, so you can wrap it in @media not (prefers-reduced-motion) if needed to make sure icons are not animated for users that prefer non-animated icons.

TypeScript type used in generator for exporting these JSON files:

interface CSSJSONExport {
	// SVG content
	content: string;

	// viewBox
	viewBox: IconViewBox;

	// Classes, key is class name
	classes: Record<string, CSSJSONExportRules>;

	// Used keyframes, key is animation name
	keyframes?: Record<string, string>;
}

interface CSSJSONExportRules {
	// Basic rules, excluding animations
	rules: string;

	// Rules used by animations
	animation?: string;
}

// From @cyberalien/svg-utils/lib/svg/viewbox/types.js
interface IconViewBox {
	left?: number;
	top?: number;
	width: number;
	height: number;
	cx?: number;
}

Class names and animation names are generated by hashing content, so possible class name collisions are resolved at build time.

Rules are minified, however, each string ends with either "}" or ";" to make sure strings are easy to join if needed.

Frames

If you want to use animated icons in software that does not support animations, svg-frames-120fps directory contains static SVG files for each animation frame, rendered at 120 frames per second.

Each directory contains frames for one icon.

Additionally, as JSON file with metadata is available, which shows number of frames used for main animation and number of frames used for repeating animation. Repeating animation can be rendered in loop after rendering main animation, or, if you only need a repeating animation, skip rendering animation.

Due to massive amount of frames, it is available only as SVG.

If you need a different format for each frame, such as PNG, you need to convert it yourself. These are basic SVG files that any software should be able to handle. There are many options for converting basic SVG to other formats.

Animation types

Most icons use "render" animation: icon shapes appearing one by one.

Other icons:

• Icons that end with -loop use infinite animtions.
• Icons that end with -transition transition between two icons.

Licence

MIT