# 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](https://github.com/cyberalien/line-md/issues).

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](https://svgwg.org/specs/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](https://svgwg.org/specs/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 string with rules.
- `animations` is the same as `classes`, but for animation rules, so you can wrap it in `@media not (prefers-reduced-motion)` if needed.
- `keyframes` contains list of used animations, where key is an animation name, value is CSS.

This is the final format used in [SVG Utils](https://github.com/cyberalien/svg-utils) package, supported by [Iconify Unplugin](https://github.com/iconify/iconify-unplugin).

Also, `@iconify-vue/line-md` and `@iconify-svelte/line-md` have pre-made components that are generated from this data and use CSS animations, see [Iconify documentation](https://iconify.design/docs/usage/svg-css/).

TypeScript type used in generator for exporting these JSON files:

```ts
// From @cyberalien/svg-utils/lib/svg-css/icon/types.js
// Reduced to include only properties used in this icon set, all rules and
// keyframes in this repository are converted to strings to simplify parsing.
interface SVGCSSIcon {
	// SVG content
	content: string;

	// viewBox
	viewBox: IconViewBox | string;

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

	// Animations for classes
	// Same as 'classes', but for animation properties, so it can be separated in the output CSS
	animations?: Record<string, string>;

	// Used keyframes, key is animation name
	keyframes?: Record<string, 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