]
t
)

Modern Pictograms Pro, version 2 of the icon typeface Modern Pictograms, works as well big as it does small. Designed for web and mobile interface designers, the icons fit for any use: presentations, print pieces, and more. Use it as you would any font or embed individual icons when you need them.

Starts at $1.99/icon

ϒ ł
½ Ò
˙ ˚ ˜
New: 32 additional icons! Version 2.34 released Feb. 28, 2014
ˆ
˘ Ú ˘
Á Ú Á
¥ Ú ¥
Modern Pictograms Pro is designed to work large and on retina displays. Version 1 was meant for small sizes only
˚ ¸ ½ Í ¬
Ö ÷ Å û ± Ÿ å
Ó Î Ú Û
Plenty of arrows and user interface options. All usable as web font, desktop font, SVG or png.
 

Character Sets

/

40px

ˆ
ˆ
˘
˘
˙
˙
˚
˚
˜
˜
˝
˝

☼
¾
¾

−

☽

♁

✓
Ô
Ô
Ù
Ù
×
×
Ð
Ð
Á
Á
¯
¯
¦
¦
¹
¹
¸
¸

′
ϒ
ϒ
ł
ł
½
½
Ë
Ë
Í
Í
È
È
Â
Â
Ê
Ê
Ò
Ò

←

→

″
¨
¨
p
p
m
m
Å
Å
R
R

≠
W
W
Ü
Ü
o
o
E
E
P
P
H
H
h
h
S
S
^
^
`
`
â
â
õ
õ
ö
ö
Y
Y
s
s
C
C
x
x
X
X

∞
%
%
=
=
?
?
!
!
J
J
ó
ó
$
$
&
&

◊
i
i

∑

∏
π
π
*
*
j
j
b
b
û
û
ù
ù
l
l
L
L
F
F
G
G
f
f
k
k
g
g
t
t
T
T
@
@
ü
ü
n
n
q
q
ª
ª

∫
Ä
Ä
w
w
Ç
Ç
¿
¿
{
{
ô
ô
}
}
‡
‡
\
\
à
à
I
I
A
A

∂

Ω
B
B
ø
ø
a
a
y
y
z
z
,
,
~
~
M
M
c
c
N
N
O
O
¡
¡
Q
Q
æ
æ
U
U
#
#
ä
ä
7
7
8
8
6
6
á
á
:
:
;
;
'
'
"
"
9
9
(
(
.
.
)
)
d
d
V
V
K
K
º
º
D
D
Z
Z
Ñ
Ñ
É
É
3
3

≤
4
4
5
5
Æ
Æ
Ø
Ø
å
å
ç
ç
é
é
è
è
ê
ê
ë
ë
í
í
ì
ì
î
î
ï
ï
ñ
ñ
ò
ò
¢
¢
Ö
Ö
ú
ú
µ
µ
ã
ã
e
e
r
r

≥

√
¬
¬
_
_
Œ
Œ
œ
œ

–
÷
÷
ÿ
ÿ
Ÿ
Ÿ
ƒ
ƒ

†
°
°
±
±
¥
¥
0
0
1
1
2
2

»
À
À
>
>
Õ
Õ

…

⁄
Ã
Ã
<
&#60;
«
&#171;
-
-

&#8710;

&#8776;
/
/
£
&#163;
§
&#167;

&#8226;

&#182;
ß
&#223;
®
&#174;
©
&#169;
´
&#180;

&#8482;
u
u
v
v

&#8218;
·
&#183;
]
]
[
[

&#8216;
Û
&#219;
Ú
&#218;

&#8212;

&#8217;

&#8220;

&#8221;

&#8250;

&#8240;

&#8222;

&#8249;

&#64258;

&#8364;

&#64257;
Ó
&#211;
Î
&#206;
Ï
&#207;
Ì
&#204;
|
|
+
+

A
A
B
B
C
C
D
D
E
E
F
F
G
G
H
H
I
I
J
J
K
K
L
L
M
M
N
N
O
O
P
P
Q
Q
R
R
S
S
T
T
U
U
V
V
W
W
X
X
Y
Y
Z
Z
a
a
b
b
c
c
d
d
e
e
f
f
g
g
h
h
i
i
j
j
k
k
l
l
m
m
n
n
o
o
p
p
q
q
r
r
s
s
t
t
u
u
v
v
w
w
x
x
y
y
z
z
1
1
2
2
3
3
4
4
5
5
6
6
7
7
8
8
9
9
0
0
`
`
!
!
@
@
#
#
$
$
%
%
^
^
,
,
*
*
(
(
)
)
-
-
_
_
+
+
=
=
[
[
{
{
]
]
}
}
'
'
"
"
:
:
;
;
<
<
>
>
?
?
/
/

Denotes new or redrawn in version 2

Designed by Micah Barrett and John Caserta, the offset printed specimen showcases the icons in use on the highest resolution display available -- paper.

14x28" three-color poster that folds to an iPad sized booklet. Printing by DES Printing. Photographs by Sarah Verity.

Printed specimen

  • specimen
  • specimen
  • specimen
  • specimen
  • specimen
  • specimen
  • specimen
  • specimen

Installation

Embedding as @font-face on the Web

1. Use the @font-face included in your purchase

2. The 'stylesheet.css' file includes the declaration of the font, and where the webfont files are located:

						
@font-face {
	font-family: 'modern_pictograms_proregular';
	src: url('modernpictogramspro_2-webfont.eot');
	src: url('modernpictogramspro_2-webfont.eot?#iefix') 
			format('embedded-opentype'),
		 url('modernpictogramspro_2-webfont.woff') 
		 	format('woff'),
		 url('modernpictogramspro_2-webfont.ttf') 
		 	format('truetype');
	font-weight: normal;
	font-style: normal;	
}			
						

3. Include the stylesheet in your HTML <head> as you would any other stylesheet:

						
<link rel="stylesheet" type="text/css" href="stylesheet.css">						
						

4. Modify the CSS urls and HTML link hrefs to point to where you are storing your files.

5. Include the icons in either HTML or CSS.

Method 1 (recommended) - Use the CSS content:before and data-icon attribute
							
<span class="icon" data-icon="(">Settings</span>
						
							
.icon:before 
{
    content: attr(data-icon);
    font-family: modern_pictograms_proregular;
    /* other styles here */
}						
						
Method 2 - direct embed in HTML, styling the element as font-family:"modern_pictograms_proregular";
						
<span class="icon">A</span>						
						
						
.icon{
	font-family: "modern_pictograms_proregular";	
}					
						

Embedding as SVGs on the Web

SVG is supported on mobile devices and HTML5 browsers

Method 1 - Embed vector data in your file. Open one of the pictograms in Adobe Illustrator (or similar), save to web and copy the SVG data. It should look like the code below.
						
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" 
id="Layer_1" x="0px" y="0px" width="100px" height="100px" viewBox="0.626 0.528 100 100" 
enable-background="new 0.626 0.528 100 100" xml:space="preserve">
<path d="M96.365,32.047l-64.22,64.22c-6.468,6.469-17.71,
5.391-25.257-2.002c-7.392-7.546-8.47-18.789-2.002-25.257l64.22-64.22  
c6.469-6.468,17.711-5.39,25.257,
2.002C101.756,14.336,102.834,25.579,96.365,32.047z M11.355,83.639  
c1.54,0,2.926-1.387,2.926-2.927s-1.386-2.926-2.926-2.926s-2.926,1.386-2.926,
2.926S9.815,83.639,11.355,83.639z M13.049,73.166   "></path>
</svg>
						
Method 2 - Embed, link or iframe to a svg file like you would an image
						
<embed src="circle1.svg" type="image/svg+xml" />
						

Loading it on your computer

For presentation software, word processing and local graphic software, you'll want to install the desktop font file included in the download. Copy and paste icons from the guide files provided, or open up a "Glyphs" pallette in softwares that support the pallette.

More help

Font Spring instructions for webfonts

24 Ways Article on data-attributes and icon fonts

Installing and uninstalling fonts on Windows

 
 

Buy Version 2

 

Single icons

nounproject

$1.99

  1. Editable Vectors
  2. For print, videos or embedding on the web
  3. Convert to png
From The Noun Project

Complete set

completeset

$25

  1. OpenType Desktop font, @font-face Web fonts, SVGs of all icons. Everything you need for any project, print or web.
  2. Free updates until version 3
Licensed by The Design Office for 1-3 desktop users and their websites. Sold "as is", no returns. Additional licensing from Fontspring.

+ Ü = $33

Add the offset-printed poster of version 2.02, folded into an iPad shaped booklet. Be sure to include your address.
From The Design Office