]
t
)
Modern Pictograms Pro, version 2 of the icon typeface Modern Pictograms, works as well big as it does small. It has been redrawn with details and lighter strokes that disappear at small sizes, and come to life at larger sizes.
Introducing Version 2
u
Ö
&
ô
¥
◊
.
÷
`
Designed as a typeface with standard line weights, baselines and optical corrections. Mix and match icons for whatever project you need.
n
n
Å
Ú
Å
r Ú r
¥ Ú ¥
r Ú r
¥ Ú ¥
Modern Pictograms Pro is designed to work large and on retina displays. Version 1 was meant for small sizes only
ã
á
∏
√
t
¬
Ö
÷
Å
û
±
Ÿ
å
‘
›
Ó
—
‹
Î
Ú
„
Û ‰
Plenty of arrows and user interface options. All usable as web font, desktop font, SVG or png.
40px
¨
¨
¨
p
p
p
m
m
m
Å
Å
Å
R
R
R
≠
≠
≠
W
W
W
Ü
Ü
Ü
o
o
o
E
E
E
P
P
P
H
H
H
h
h
h
S
S
S
^
^
^
`
`
`
â
â
â
õ
õ
õ
ö
ö
ö
Y
Y
Y
s
s
s
C
C
C
x
x
x
X
X
X
∞
∞
∞
%
%
%
=
=
=
?
?
?
!
!
!
J
J
J
ó
ó
ó
$
$
$
&
&
&
◊
◊
◊
i
i
i
∑
∑
∑
∏
∏
∏
π
π
π
*
*
*
j
j
j
b
b
b
û
û
û
ù
ù
ù
l
l
l
L
L
L
F
F
F
G
G
G
f
f
f
k
k
k
g
g
g
t
t
t
T
T
T
@
@
@
ü
ü
ü
n
n
n
q
q
q
ª
ª
ª
∫
∫
∫
Ä
Ä
Ä
w
w
w
Ç
Ç
Ç
¿
¿
¿
{
{
{
ô
ô
ô
}
}
}
‡
‡
‡
\
\
\
à
à
à
I
I
I
A
A
A
∂
∂
∂
Ω
Ω
Ω
B
B
B
ø
ø
ø
a
a
a
y
y
y
z
z
z
,
,
,
~
~
~
M
M
M
c
c
c
N
N
N
O
O
O
¡
¡
¡
Q
Q
Q
æ
æ
æ
U
U
U
#
#
#
ä
ä
ä
7
7
7
8
8
8
6
6
6
á
á
á
:
:
:
;
;
;
'
'
'
"
"
"
9
9
9
(
(
(
.
.
.
)
)
)
d
d
d
V
V
V
K
K
K
º
º
º
D
D
D
Z
Z
Z
Ñ
Ñ
Ñ
É
É
É
3
3
3
≤
≤
≤
4
4
4
5
5
5
Æ
Æ
Æ
Ø
Ø
Ø
å
å
å
ç
ç
ç
é
é
é
è
è
è
ê
ê
ê
ë
ë
ë
í
í
í
ì
ì
ì
î
î
î
ï
ï
ï
ñ
ñ
ñ
ò
ò
ò
¢
¢
¢
Ö
Ö
Ö
ú
ú
ú
µ
µ
µ
ã
ã
ã
e
e
e
r
r
r
≥
≥
≥
√
√
√
¬
¬
¬
_
_
_
Œ
Œ
Œ
œ
œ
œ
–
–
–
÷
÷
÷
ÿ
ÿ
ÿ
Ÿ
Ÿ
Ÿ
ƒ
ƒ
ƒ
†
†
†
°
°
°
±
±
±
¥
¥
¥
0
0
0
1
1
1
2
2
2
»
»
»
À
À
À
>
>
>
Õ
Õ
Õ
…
…
…
⁄
⁄
⁄
Ã
Ã
Ã
<
<
<
«
«
«
-
-
-
∆
∆
∆
≈
≈
≈
/
/
/
£
£
£
§
§
§
•
•
•
¶
¶
¶
ß
ß
ß
®
®
®
©
©
©
´
´
´
™
™
™
u
u
u
v
v
v
·
·
·
]
]
]
[
[
[
‘
‘
‘
Û
Û
Û
Ú
Ú
Ú
—
—
—
’
’
’
“
“
“
”
”
”
›
›
›
‰
‰
‰
„
„
„
‹
‹
‹
fl
fl
fl
€
€
€
fi
fi
fi
Ó
Ó
Ó
Î
Î
Î
X
X
X
Ï
Ï
Ï
Ì
Ì
Ì
+
+
+
A
A
A
B
B
B
C
C
C
D
D
D
E
E
E
F
F
F
G
G
G
H
H
H
I
I
I
J
J
J
K
K
K
L
L
L
M
M
M
N
N
N
O
O
O
P
P
P
Q
Q
Q
R
R
R
S
S
S
T
T
T
U
U
U
V
V
V
W
W
W
X
X
X
Y
Y
Y
Z
Z
Z
a
a
a
b
b
b
c
c
c
d
d
d
e
e
e
f
f
f
g
g
g
h
h
h
i
i
i
j
j
j
k
k
k
l
l
l
m
m
m
n
n
n
o
o
o
p
p
p
q
q
q
r
r
r
s
s
s
t
t
t
u
u
u
v
v
v
w
w
w
x
x
x
y
y
y
z
z
z
1
1
1
2
2
2
3
3
3
4
4
4
5
5
5
6
6
6
7
7
7
8
8
8
9
9
9
0
0
0
`
`
`
!
!
!
@
@
@
#
#
#
$
$
$
%
%
%
^
^
^
,
,
,
*
*
*
(
(
(
)
)
)
-
-
-
_
_
_
+
+
+
=
=
=
[
[
[
{
{
{
]
]
]
}
}
}
'
'
'
"
"
"
:
:
:
;
;
;
<
<
<
>
>
>
?
?
?
/
/
/
Denotes new or redrawn in version 2
202 Icons in version 2 70 Icons in version 1
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.
t
Get notified of new versions and post icon suggestions on twitter @modernpictogram
¬
Version 1 is deprecated
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" />
More help
Font Spring instructions for webfonts
24 Ways Article on data-attributes and icon fonts
Buy Version 2
Single icons
Complete set
$25
- OpenType Desktop font, @font-face Web fonts, SVGs of all icons. Everything you need for any project, print or web.
- Free updates until version 3