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.

Icon requests

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

Icon types

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

• svg-static contains staic 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. These files are for developers, so you can render final icons yourself.

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 faster, use less resources.
• Icons are compact because CSS can be moved to a .css file and cached in browser, also avoiding content duplication.
• 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 in JSON format with 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.

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

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